/* Área autenticada do condômino. */
        .dashboard { padding-bottom: 3.5rem; }
        .dashboard-cabecalho { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
        .dashboard-cabecalho p { color: var(--texto-suave); max-width: 540px; }
        .dashboard-perfil { align-items: center; color: var(--azul); display: flex; font-size: .86rem; font-weight: 700; gap: .6rem; text-decoration: none; white-space: nowrap; }
        .dashboard-avatar { align-items: center; background: var(--azul); border-radius: 50%; color: #fff; display: inline-flex; font-size: .8rem; height: 34px; justify-content: center; width: 34px; }
        .dashboard-resumo { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.4rem; }
        .resumo-item { align-items: center; background: rgba(255,255,255,.75); border: 1px solid var(--borda); border-radius: 8px; display: flex; gap: 1rem; min-height: 126px; padding: 1.25rem; }
        .resumo-icone, .estado-icone { align-items: center; background: #e6eef6; border-radius: 50%; color: var(--azul); display: inline-flex; flex: 0 0 auto; font-size: .75rem; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
        .resumo-boletos .resumo-icone { background: #e8f3ea; color: #236746; }
        .resumo-reserva .resumo-icone { background: #f4eadb; color: #895519; }
        .resumo-rotulo { color: var(--texto-suave); display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
        .resumo-item strong { color: var(--azul); display: block; font-family: "Playfair Display", serif; font-size: 1.55rem; font-weight: 600; line-height: 1.25; }
        .resumo-item small { color: var(--texto-suave); font-size: .78rem; }
        .dashboard-grade { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .dashboard-painel { background: rgba(255,255,255,.8); border: 1px solid var(--borda); border-radius: 8px; display: flex; flex-direction: column; min-height: 285px; padding: 1.5rem; }
        .painel-titulo { align-items: flex-start; display: flex; justify-content: space-between; gap: 1rem; }
        .painel-titulo h2 { font-size: 1.45rem; margin: .25rem 0 0; }
        .botao-icone { align-items: center; border: 1px solid var(--borda); border-radius: 50%; color: var(--azul); display: inline-flex; font-size: 1.2rem; height: 34px; justify-content: center; text-decoration: none; width: 34px; }
        .botao-icone:hover, .botao-icone:focus-visible { background: var(--azul); color: #fff; }
        .financeiro-vazio { align-items: center; color: var(--texto-suave); display: flex; flex: 1; font-size: .9rem; gap: .9rem; padding: 1.25rem 0; }
        .botao-primario { background: var(--azul); border-radius: 6px; color: #fff; font-size: .88rem; font-weight: 700; padding: .75rem 1rem; text-align: center; text-decoration: none; }
        .botao-primario:hover, .botao-primario:focus-visible { background: var(--azul-medio); }
        .reserva-imagem { border-radius: 6px; height: 102px; margin: 1.15rem 0 .9rem; object-fit: cover; width: 100%; }
        .reserva-conteudo p, .documentos p { color: var(--texto-suave); font-size: .88rem; margin-bottom: .7rem; }
        .link-seta { color: var(--azul); font-size: .85rem; font-weight: 700; text-decoration: none; }
        .link-seta:hover, .link-seta:focus-visible { text-decoration: underline; }
        .lista-recados { list-style: none; margin-top: 1rem; }
        .lista-recados li { border-top: 1px solid var(--borda); padding: .9rem 0; }
        .lista-recados time { color: var(--destaque); display: block; font-size: .7rem; font-weight: 800; margin-bottom: .2rem; }
        .lista-recados a { color: var(--texto); font-size: .9rem; text-decoration: none; }
        .lista-recados a:hover, .lista-recados a:focus-visible { color: var(--azul); text-decoration: underline; }
        .documentos p { flex: 1; margin-top: 1.4rem; }
        @media (max-width: 780px) {
            .dashboard-cabecalho { align-items: flex-start; flex-direction: column; gap: 1rem; }
            .dashboard-resumo, .dashboard-grade { grid-template-columns: 1fr; }
        }
        :root {
            --azul: #142f5c;
            --azul-medio: #244b7d;
            --fundo: #edf2f7;
            --painel: #f7fafc;
            --borda: #cbd9e7;
            --texto: #172235;
            --texto-suave: #52657b;
            --destaque: #6f8fb4;
            --erro-fundo: #fff1f1;
            --erro: #9b3030;
            --sucesso-fundo: #edf8f2;
            --sucesso: #236746;
        }

/* Ajustes finais das views de login e contato. */
.login-painel {
    background: rgba(247, 250, 252, 0.94);
    border: 1px solid var(--borda);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(20, 47, 92, 0.12);
    margin: 0 auto;
    max-width: 450px;
    padding: 2.8rem;
    width: 100%;
}

.login-painel h2 { color: var(--azul); font-family: "Playfair Display", serif; font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 500; line-height: 1.15; margin: 0.5rem 0 0.7rem; }
.login-painel .intro { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 1.8rem; }
.login-painel .campo { display: block; margin-bottom: 1.15rem; }
.login-painel .campo span { color: var(--texto); display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.45rem; }
.login-painel .campo input { background: #fff; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font: inherit; font-size: 0.95rem; outline: none; padding: 0.85rem 0.95rem; width: 100%; }
.login-painel .campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
.opcoes { align-items: center; display: flex; justify-content: space-between; margin: 0.2rem 0 1.5rem; }
.lembrar { align-items: center; color: var(--texto-suave); display: flex; font-size: 0.8rem; gap: 0.45rem; }
.lembrar input { accent-color: var(--azul); height: 15px; width: 15px; }
.link-acao { color: var(--azul); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.link-acao:hover, .link-acao:focus-visible { color: var(--azul-medio); text-decoration: underline; }
.login-painel button, .contato-grid button { background: var(--azul); border: 0; border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.9rem 1rem; width: 100%; }
.login-painel button:hover, .login-painel button:focus-visible, .contato-grid button:hover, .contato-grid button:focus-visible { background: var(--azul-medio); }

.contato-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.contato-grid .painel { background: rgba(247, 250, 252, 0.95); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 14px 35px rgba(20, 47, 92, 0.09); padding: 2rem; }
.contato-grid .campo input, .contato-grid .campo textarea { background: #fff; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font: inherit; padding: 0.8rem 0.9rem; width: 100%; }
.contato-grid .campo textarea { min-height: 125px; resize: vertical; }
.contato-grid .campo input:focus, .contato-grid .campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
.mapa { min-height: 100%; overflow: hidden; padding: 0 !important; }
.mapa h2 { padding: 2rem 2rem 0; }
.mapa iframe { border: 0; display: block; min-height: 390px; width: 100%; }
.mapa-legenda { color: var(--texto-suave); font-size: 0.82rem; padding: 0.8rem 2rem 1.2rem; }
.marca-panet { font-weight: 700; text-decoration: none; }
.marca-panet .pa { color: #ff8324; }
.marca-panet .net { color: #0067da; }
.marca-panet:hover, .marca-panet:focus-visible { text-decoration: underline; }

/* Formato horizontal da area restrita na pagina inicial. */
.login-morador {
    align-items: center;
    background: var(--bege, #e1eaf3);
    border: 1px solid #cbd9e7;
    border-radius: 40px;
    box-shadow: 0 4px 16px rgba(20, 47, 92, 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    margin: 2.5rem 0 3rem;
    padding: 2.5rem 2.8rem;
}

.login-texto { flex: 1 1 360px; }
.login-texto h3 { color: var(--verde-escuro, #142f5c); font-family: "Playfair Display", serif; font-size: 1.8rem; font-weight: 400; margin-bottom: 0.2rem; }
.login-texto p { color: var(--texto-claro, #52657b); font-size: 0.95rem; }
.login-texto .tag { background: var(--verde-escuro, #142f5c); border-radius: 40px; color: #fff; display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; margin-top: 0.4rem; padding: 0.2rem 1rem; text-transform: uppercase; }

.login-form {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd9e7;
    border-radius: 80px;
    box-shadow: 0 2px 12px rgba(20, 47, 92, 0.06);
    display: flex;
    flex: 2 1 520px;
    flex-wrap: nowrap;
    gap: 1rem;
    min-width: 0;
    padding: 0.9rem 1.5rem 0.9rem 1.8rem;
}

.login-form input { background: transparent; border: 0; border-bottom: 1px solid #cbd9e7; flex: 1 1 120px; font: inherit; font-size: 0.95rem; min-width: 0; outline: none; padding: 0.7rem 0.2rem; }
.login-form input:focus { border-bottom-color: var(--destaque, #6f8fb4); }
.login-form button { background: var(--verde-escuro, #142f5c); border: 0; border-radius: 40px; color: #fff; cursor: pointer; flex: 0 0 auto; font: inherit; font-size: 0.95rem; padding: 0.7rem 2.2rem; white-space: nowrap; }
.login-form button:hover, .login-form button:focus-visible { background: var(--verde-claro, #244b7d); }
.login-extra { align-items: center; color: var(--texto-claro, #52657b); display: flex; flex: 0 0 auto; flex-wrap: nowrap; font-size: 0.8rem; gap: 0.4rem; white-space: nowrap; }
.login-extra a { border-bottom: 1px dotted var(--destaque, #6f8fb4); color: var(--verde-escuro, #142f5c); font-weight: 500; text-decoration: none; }
.login-extra a:hover, .login-extra a:focus-visible { color: var(--destaque, #6f8fb4); }

@media (max-width: 780px) {
    .login-morador { align-items: stretch; border-radius: 32px; flex-direction: column; padding: 2rem 1.5rem; }
    .login-form { align-items: stretch; border-radius: 28px; flex-direction: column; gap: 1rem; padding: 1.5rem; }
    .login-form input, .login-form button, .login-extra { width: 100%; }
    .login-form button { padding: 0.9rem; }
    .login-extra { justify-content: center; }
}

@media (max-width: 780px) {
    .contato-grid { grid-template-columns: 1fr; }
    .contato-grid .painel { padding: 1.5rem; }
    .mapa h2 { padding: 1.5rem 1.5rem 0; }
    .mapa-legenda { padding-left: 1.5rem; padding-right: 1.5rem; }
    .mapa iframe { min-height: 300px; }
    .login-painel { border-radius: 18px; padding: 2rem 1.35rem; }
    .opcoes { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
}

/* Formato final da Area Restrita. */
.login-morador { align-items: center; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.login-texto { flex: 1 1 360px; }
.login-form { align-items: center !important; background: #fff !important; border: 1px solid #cbd9e7 !important; border-radius: 80px !important; box-shadow: 0 2px 12px rgba(20,47,92,.06) !important; display: flex !important; flex: 2 1 520px !important; flex-wrap: nowrap !important; gap: 1rem !important; min-width: 0 !important; padding: .9rem 1.5rem .9rem 1.8rem !important; }
.login-form input { background: transparent; border: 0; border-bottom: 1px solid #cbd9e7; flex: 1 1 120px; font: inherit; font-size: .95rem; min-width: 0; outline: none; padding: .7rem .2rem; }
.login-form input:focus { border-bottom-color: #6f8fb4; }
.login-form button { background: #142f5c !important; border: 0 !important; border-radius: 40px !important; color: #fff !important; cursor: pointer; font: inherit; font-size: .95rem; padding: .7rem 2.2rem; white-space: nowrap; width: auto !important; }
.login-form button:hover { background: #244b7d; }
.login-extra { align-items: center; display: flex; flex-wrap: nowrap; font-size: .8rem; gap: .4rem; white-space: nowrap; }
.login-extra a { border-bottom: 1px dotted #6f8fb4; color: #142f5c; text-decoration: none; }
.login-extra a:hover { color: #6f8fb4; }

@media (max-width: 780px) {
    .login-morador { align-items: stretch; flex-direction: column; }
    .login-form { align-items: stretch; border-radius: 28px; flex-direction: column; padding: 1.5rem; }
    .login-form input, .login-form button { width: 100%; }
    .login-extra { justify-content: center; }
}

/* Formato horizontal da area restrita na home. */
.login-morador { align-items: center; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.login-texto { flex: 1 1 360px; }
.login-form { align-items: center; background: #fff; border: 1px solid var(--borda); border-radius: 80px; box-shadow: 0 2px 12px rgba(20,47,92,.06); display: flex; flex: 2 1 520px; flex-wrap: nowrap; gap: 1rem; min-width: 0; padding: .9rem 1.5rem .9rem 1.8rem; }
.login-form input { background: transparent; border: 0; border-bottom: 1px solid var(--borda); flex: 1 1 120px; font: inherit; font-size: .95rem; min-width: 0; outline: none; padding: .7rem .2rem; }
.login-form input:focus { border-bottom-color: var(--destaque); }
.login-form button { background: var(--azul); border: 0; border-radius: 40px; color: #fff; cursor: pointer; font: inherit; font-size: .95rem; padding: .7rem 2.2rem; white-space: nowrap; width: auto; }
.login-form button:hover { background: var(--azul-claro, #244b7d); }
.login-extra { align-items: center; display: flex; flex-wrap: nowrap; font-size: .8rem; gap: .4rem; white-space: nowrap; }
.login-extra a { border-bottom: 1px dotted var(--destaque); color: var(--azul); text-decoration: none; }
.login-extra a:hover { color: var(--destaque); }

@media (max-width: 780px) {
    .login-morador { align-items: stretch; flex-direction: column; }
    .login-form { align-items: stretch; border-radius: 28px; flex-direction: column; padding: 1.5rem; }
    .login-form input, .login-form button { width: 100%; }
    .login-extra { justify-content: center; }
}
/* Corrige o formulario de acesso da area restrita da home. */
.login-morador {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

.login-form {
    align-items: center;
    background: #f9fbfd;
    border: 1px solid #cbd9e7;
    border-radius: 80px;
    box-shadow: 0 2px 12px rgba(20, 47, 92, 0.06);
    display: flex;
    flex: 2 1 340px;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    padding: 0.9rem 1.5rem 0.9rem 1.8rem;
}

.login-form input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #cbd9e7;
    flex: 1 1 120px;
    font: inherit;
    font-size: 0.95rem;
    min-width: 100px;
    outline: none;
    padding: 0.7rem 0.2rem;
}

.login-form input:focus { border-bottom-color: var(--destaque); }
.login-form input::placeholder { color: #8295aa; font-weight: 300; }

.login-form button {
    background: var(--azul);
    border: 0;
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 0.7rem 2.2rem;
    white-space: nowrap;
}

.login-form button:hover,
.login-form button:focus-visible { background: var(--azul-medio); }

.login-extra {
    align-items: center;
    color: var(--texto-suave);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.4rem;
}

.login-extra a {
    border-bottom: 1px dotted var(--destaque);
    color: var(--azul);
    font-weight: 500;
    text-decoration: none;
}

.login-extra a:hover,
.login-extra a:focus-visible { color: var(--destaque); }

@media (max-width: 780px) {
    .login-form {
        align-items: stretch;
        border-radius: 28px;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .login-form input { min-width: 0; width: 100%; }
    .login-form button { padding: 0.9rem; width: 100%; }
    .login-extra { justify-content: center; }
}

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background: linear-gradient(135deg, #e5edf5 0%, var(--fundo) 55%, #dce7f1 100%);
            color: var(--texto);
            font-family: "Inter", sans-serif;
            line-height: 1.5;
            min-height: 100vh;
        }

        main,
        .navbar,
        .footer {
            margin: 0 auto;
            max-width: 1280px;
            width: 100%;
        }

        .navbar {
            align-items: center;
            display: flex;
            justify-content: space-between;
            padding: 1.2rem 1.8rem 1rem;
        }

        .logo { align-items: center; display: flex; gap: 0.9rem; }
        .logo img:first-child { height: 58px; max-width: 260px; object-fit: contain; width: auto; }
        .logo img:last-child {
            height: 58px;
            max-width: 260px;
            object-fit: contain;
            width: auto;
        }
        .logo-divider {
            background: var(--destaque);
            height: 40px;
            opacity: 0.65;
            width: 2px;
        }

        .nav-links { align-items: center; display: flex; gap: 2.2rem; }
        .nav-links a,
        .voltar,
        .telefone a,
        .endereco a {
            color: var(--azul);
            font-weight: 600;
            text-decoration: none;
        }

        .voltar { font-size: 0.85rem; }
        .badge-morador { background: var(--azul); border: 1px solid var(--azul); border-radius: 40px; color: #fff !important; display: inline-block; padding: 0.35rem 1.4rem; }
        .badge-morador:hover, .badge-morador:focus-visible { background: var(--azul-medio); color: #fff !important; text-decoration: none !important; }
        .voltar:hover, .voltar:focus-visible, .telefone a:hover, .endereco a:hover { color: var(--azul-medio); text-decoration: underline; }

        main { padding: 2rem; }

        .intro { margin-bottom: 2rem; }
        .etiqueta {
            color: var(--destaque);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        h1, h2 { color: var(--azul); font-family: "Playfair Display", serif; font-weight: 500; }
        h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.1; margin: 0.45rem 0 0.6rem; }
        h2 { font-size: 1.7rem; margin-bottom: 1.1rem; }
        .intro p { color: var(--texto-suave); font-size: 0.98rem; max-width: 600px; }

        .contato-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
        /* Estilos complementares das páginas de acesso e contato. */
        .login-painel {
            background: rgba(247, 250, 252, 0.94);
            border: 1px solid var(--borda);
            border-radius: 24px;
            box-shadow: 0 18px 50px rgba(20, 47, 92, 0.12);
            margin: 0 auto;
            max-width: 450px;
            padding: 2.8rem;
            width: 100%;
        }
        .login-painel h2 { color: var(--azul); font-family: "Playfair Display", serif; font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 500; line-height: 1.15; margin: 0.5rem 0 0.7rem; }
        .login-painel .intro { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 1.8rem; }
        .login-painel .campo { display: block; margin-bottom: 1.15rem; }
        .login-painel .campo span { color: var(--texto); display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.45rem; }
        .login-painel .campo input { background: #fff; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font: inherit; font-size: 0.95rem; outline: none; padding: 0.85rem 0.95rem; width: 100%; }
        .login-painel .campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
        .opcoes { align-items: center; display: flex; justify-content: space-between; margin: 0.2rem 0 1.5rem; }
        .lembrar { align-items: center; color: var(--texto-suave); display: flex; font-size: 0.8rem; gap: 0.45rem; }
        .lembrar input { accent-color: var(--azul); height: 15px; width: 15px; }
        .link-acao { color: var(--azul); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
        .login-painel button { background: var(--azul); border: 0; border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.9rem 1rem; width: 100%; }
        .login-painel button:hover, .login-painel button:focus-visible { background: var(--azul-medio); }
        .contato-grid .painel { background: rgba(247, 250, 252, 0.95); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 14px 35px rgba(20, 47, 92, 0.09); padding: 2rem; }
        .contato-grid .campo input, .contato-grid .campo textarea { background: #fff; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font: inherit; padding: 0.8rem 0.9rem; width: 100%; }
        .contato-grid .campo textarea { min-height: 125px; resize: vertical; }
        .contato-grid .campo input:focus, .contato-grid .campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
        .mapa { min-height: 100%; overflow: hidden; padding: 0 !important; }
        .mapa h2 { padding: 2rem 2rem 0; }
        .mapa iframe { border: 0; display: block; min-height: 390px; width: 100%; }
        .mapa-legenda { color: var(--texto-suave); font-size: 0.82rem; padding: 0.8rem 2rem 1.2rem; }
        .marca-panet { font-weight: 700; text-decoration: none; }
        .marca-panet .pa { color: #ff8324; }
        .marca-panet .net { color: #0067da; }
        .marca-panet:hover, .marca-panet:focus-visible { text-decoration: underline; }
                    :root {
                        --azul: #142f5c;
                        --azul-medio: #244b7d;
                        --fundo: #edf2f7;
                        --painel: #f7fafc;
                        --borda: #cbd9e7;
                        --texto: #172235;
                        --texto-suave: #52657b;
                        --destaque: #6f8fb4;
                        --erro-fundo: #fff1f1;
                        --erro: #9b3030;
                        --sucesso-fundo: #edf8f2;
                        --sucesso: #236746;
                    }

                    * { box-sizing: border-box; margin: 0; padding: 0; }

                    body {
                        background: linear-gradient(135deg, #e5edf5 0%, var(--fundo) 55%, #dce7f1 100%);
                        color: var(--texto);
                        font-family: "Inter", sans-serif;
                        line-height: 1.5;
                        min-height: 100vh;
                    }

                    main,
                    .navbar,
                    .footer {
                        margin: 0 auto;
                        max-width: 1280px;
                        width: 100%;
                    }

                    .navbar {
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                        padding: 1.2rem 1.8rem 1rem;
                    }

                    /* Estilos complementares das páginas de acesso e contato. */
                    .login-painel {
                        background: rgba(247, 250, 252, 0.94);
                        border: 1px solid var(--borda);
                        border-radius: 24px;
                        box-shadow: 0 18px 50px rgba(20, 47, 92, 0.12);
                        margin: 0 auto;
                        max-width: 450px;
                        padding: 2.8rem;
                        width: 100%;
                    }

                    .login-painel h2 {
                        color: var(--azul);
                        font-family: "Playfair Display", serif;
                        font-size: clamp(2rem, 5vw, 2.7rem);
                        font-weight: 500;
                        line-height: 1.15;
                        margin: 0.5rem 0 0.7rem;
                    }

                    .login-painel .intro {
                        color: var(--texto-suave);
                        font-size: 0.95rem;
                        margin-bottom: 1.8rem;
                    }

                    .login-painel .campo {
                        display: block;
                        margin-bottom: 1.15rem;
                    }

                    .login-painel .campo span {
                        color: var(--texto);
                        display: block;
                        font-size: 0.84rem;
                        font-weight: 600;
                        margin-bottom: 0.45rem;
                    }

                    .login-painel .campo input {
                        background: #fff;
                        border: 1px solid var(--borda);
                        border-radius: 8px;
                        color: var(--texto);
                        font: inherit;
                        font-size: 0.95rem;
                        outline: none;
                        padding: 0.85rem 0.95rem;
                        transition: border-color 0.2s, box-shadow 0.2s;
                        width: 100%;
                    }

                    .login-painel .campo input::placeholder {
                        color: #8295aa;
                    }

                    .login-painel .campo input:focus,
                    .contato-grid .campo input:focus,
                    .contato-grid .campo textarea:focus {
                        border-color: var(--azul);
                        box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12);
                    }

                    .opcoes {
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                        margin: 0.2rem 0 1.5rem;
                    }

                    .lembrar {
                        align-items: center;
                        color: var(--texto-suave);
                        display: flex;
                        font-size: 0.8rem;
                        gap: 0.45rem;
                    }

                    .lembrar input {
                        accent-color: var(--azul);
                        height: 15px;
                        width: 15px;
                    }

                    .link-acao {
                        color: var(--azul);
                        font-size: 0.8rem;
                        font-weight: 600;
                        text-decoration: none;
                    }

                    .link-acao:hover,
                    .link-acao:focus-visible {
                        color: var(--azul-medio);
                        text-decoration: underline;
                    }

                    .login-painel button,
                    .contato-grid button {
                        background: var(--azul);
                        border: 0;
                        border-radius: 8px;
                        color: #fff;
                        cursor: pointer;
                        font: inherit;
                        font-size: 0.95rem;
                        font-weight: 600;
                        padding: 0.9rem 1rem;
                        transition: background 0.2s, transform 0.2s;
                        width: 100%;
                    }

                    .login-painel button:hover,
                    .login-painel button:focus-visible,
                    .contato-grid button:hover,
                    .contato-grid button:focus-visible {
                        background: var(--azul-medio);
                    }

                    .login-painel button:active,
                    .contato-grid button:active {
                        transform: translateY(1px);
                    }

                    .contato-grid {
                        display: grid;
                        gap: 1.5rem;
                        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
                    }

                    .contato-grid .painel {
                        background: rgba(247, 250, 252, 0.95);
                        border: 1px solid var(--borda);
                        border-radius: 18px;
                        box-shadow: 0 14px 35px rgba(20, 47, 92, 0.09);
                        padding: 2rem;
                    }

                    .contato-grid .canais {
                        border-top: 1px solid var(--borda);
                        margin-top: 1.7rem;
                        padding-top: 1.4rem;
                    }

                    .contato-grid .telefone,
                    .contato-grid .endereco {
                        color: var(--texto-suave);
                        font-size: 0.9rem;
                        margin-top: 0.9rem;
                    }

                    .contato-grid .telefone strong,
                    .contato-grid .endereco strong {
                        color: var(--texto);
                        display: block;
                        font-size: 0.78rem;
                        margin-bottom: 0.15rem;
                        text-transform: uppercase;
                    }

                    .contato-grid .indisponivel {
                        color: var(--texto-suave);
                        font-style: italic;
                    }

                    .contato-grid .campo {
                        display: block;
                        margin-bottom: 1rem;
                    }

                    .contato-grid .campo span {
                        display: block;
                        font-size: 0.82rem;
                        font-weight: 600;
                        margin-bottom: 0.4rem;
                    }

                    .contato-grid .campo input,
                    .contato-grid .campo textarea {
                        background: #fff;
                        border: 1px solid var(--borda);
                        border-radius: 8px;
                        color: var(--texto);
                        font: inherit;
                        font-size: 0.92rem;
                        outline: none;
                        padding: 0.8rem 0.9rem;
                        resize: vertical;
                        width: 100%;
                    }

                    .contato-grid .campo textarea {
                        min-height: 125px;
                    }

                    .mapa {
                        min-height: 100%;
                        overflow: hidden;
                        padding: 0 !important;
                    }

                    .mapa h2 {
                        padding: 2rem 2rem 0;
                    }

                    .mapa iframe {
                        border: 0;
                        display: block;
                        min-height: 390px;
                        width: 100%;
                    }

                    .mapa-legenda {
                        color: var(--texto-suave);
                        font-size: 0.82rem;
                        padding: 0.8rem 2rem 1.2rem;
                    }

                    .aviso {
                        border-radius: 8px;
                        font-size: 0.84rem;
                        margin-bottom: 1rem;
                        padding: 0.75rem 0.9rem;
                    }

                    .aviso-erro {
                        background: var(--erro-fundo);
                        border: 1px solid #e8baba;
                        color: var(--erro);
                    }

                    .aviso-sucesso {
                        background: var(--sucesso-fundo);
                        border: 1px solid #b8ddc8;
                        color: var(--sucesso);
                    }

                    .marca-panet {
                        font-weight: 700;
                        text-decoration: none;
                    }

                    .marca-panet .pa { color: #ff8324; }
                    .marca-panet .net { color: #0067da; }

                    .marca-panet:hover,
                    .marca-panet:focus-visible {
                        text-decoration: underline;
                    }

                    @media (max-width: 780px) {
                        .contato-grid {
                            grid-template-columns: 1fr;
                        }

                        .contato-grid .painel {
                            padding: 1.5rem;
                        }

                        .mapa h2 {
                            padding: 1.5rem 1.5rem 0;
                        }

                        .mapa-legenda {
                            padding-left: 1.5rem;
                            padding-right: 1.5rem;
                        }

                        .mapa iframe {
                            min-height: 300px;
                        }

                        .login-painel {
                            border-radius: 18px;
                            padding: 2rem 1.35rem;
                        }

                        .opcoes {
                            align-items: flex-start;
                            flex-direction: column;
                            gap: 0.8rem;
                        }
                    }

        .canais { border-top: 1px solid var(--borda); margin-top: 1.7rem; padding-top: 1.4rem; }
        .telefone, .endereco { color: var(--texto-suave); font-size: 0.9rem; margin-top: 0.9rem; }
        .telefone strong, .endereco strong { color: var(--texto); display: block; font-size: 0.78rem; margin-bottom: 0.15rem; text-transform: uppercase; }
        .indisponivel { color: var(--texto-suave); font-style: italic; }

        .aviso { border-radius: 8px; font-size: 0.84rem; margin-bottom: 1rem; padding: 0.75rem 0.9rem; }
        .aviso-erro { background: var(--erro-fundo); border: 1px solid #e8baba; color: var(--erro); }
        .aviso-sucesso { background: var(--sucesso-fundo); border: 1px solid #b8ddc8; color: var(--sucesso); }

        .campo { display: block; margin-bottom: 1rem; }
        .campo span { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; }
        .campo input, .campo textarea {
            background: #fff;
            border: 1px solid var(--borda);
            border-radius: 8px;
            color: var(--texto);
            font: inherit;
            font-size: 0.92rem;
            outline: none;
            padding: 0.8rem 0.9rem;
            resize: vertical;
            width: 100%;
        }
        .campo textarea { min-height: 125px; }
        .campo input:focus, .campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
        button {
            background: var(--azul);
            border: 0;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            font: inherit;
            font-size: 0.92rem;
            font-weight: 600;
            padding: 0.85rem 1rem;
            transition: background 0.2s, transform 0.2s;
            width: 100%;
        }
        button:hover, button:focus-visible { background: var(--azul-medio); }
        button:active { transform: translateY(1px); }

        .mapa { min-height: 100%; overflow: hidden; padding: 0; }
        .mapa h2 { padding: 2rem 2rem 0; }
        .mapa iframe { border: 0; display: block; min-height: 390px; width: 100%; }
        .mapa-legenda { color: var(--texto-suave); font-size: 0.82rem; padding: 0.8rem 2rem 1.2rem; }
            .login-painel {
                background: rgba(247, 250, 252, 0.94);
                border: 1px solid var(--borda);
                border-radius: 24px;
                box-shadow: 0 18px 50px rgba(20, 47, 92, 0.12);
                margin: 0 auto;
                max-width: 450px;
                padding: 2.8rem;
                width: 100%;
            }
            .login-painel .intro { margin-bottom: 1.8rem; }
            .login-painel .campo { display: block; margin-bottom: 1.15rem; }
            .login-painel .campo span { color: var(--texto); display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.45rem; }
            .login-painel .campo input {
                background: #fff;
                border: 1px solid var(--borda);
                border-radius: 8px;
                color: var(--texto);
                font: inherit;
                font-size: 0.95rem;
                outline: none;
                padding: 0.85rem 0.95rem;
                transition: border-color 0.2s, box-shadow 0.2s;
                width: 100%;
            }
            .login-painel .campo input::placeholder { color: #8295aa; }
            .login-painel .campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
            .opcoes { align-items: center; display: flex; justify-content: space-between; margin: 0.2rem 0 1.5rem; }
            .lembrar { align-items: center; color: var(--texto-suave); display: flex; font-size: 0.8rem; gap: 0.45rem; }
            .lembrar input { accent-color: var(--azul); height: 15px; width: 15px; }
            .link-acao { color: var(--azul); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
            .link-acao:hover, .link-acao:focus-visible { color: var(--azul-medio); text-decoration: underline; }
            .login-painel button {
                background: var(--azul);
                border: 0;
                border-radius: 8px;
                color: #fff;
                cursor: pointer;
                font: inherit;
                font-size: 0.95rem;
                font-weight: 600;
                padding: 0.9rem 1rem;
                transition: background 0.2s, transform 0.2s;
                width: 100%;
            }
            .login-painel button:hover, .login-painel button:focus-visible { background: var(--azul-medio); }
            .login-painel button:active { transform: translateY(1px); }
        .footer { border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 0.78rem; margin-top: 1rem; padding: 2rem 1.8rem 1.8rem; text-align: center; }
        .footer .logo-mini { color: var(--azul); font-family: "Playfair Display", serif; font-size: 1.4rem; }
        .footer .logo-mini span { color: var(--destaque); }
        .marca-panet { font-weight: 700; text-decoration: none; }
        .marca-panet .pa { color: #ff8324; }
        .marca-panet .net { color: #0067da; }
        .marca-panet:hover, .marca-panet:focus-visible { text-decoration: underline; }

        @media (max-width: 780px) {
            .navbar { align-items: flex-start; padding: 1.2rem 1rem 1rem; }
            .logo { gap: 0.55rem; }
            .logo img:first-child { height: 42px; max-width: 105px; }
            .logo img:last-child { height: 38px; width: 125px; }
            .nav-links { gap: 0.8rem; }
            .voltar { font-size: 0.75rem; }
            main { padding: 1rem; }
            .contato-grid { grid-template-columns: 1fr; }
            .painel { padding: 1.5rem; }
            .mapa h2 { padding: 1.5rem 1.5rem 0; }
            .mapa-legenda { padding-left: 1.5rem; padding-right: 1.5rem; }
            .mapa iframe { min-height: 300px; }
            .footer { padding-left: 1rem; padding-right: 1rem; }
                .login-painel { border-radius: 18px; padding: 2rem 1.35rem; }
                .opcoes { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Inter", sans-serif;
            background: #edf2f7;
            color: #172235;
            line-height: 1.5;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.8rem;
        }

        /* cores principais */
        :root {
            --verde-escuro: #142f5c;
            --verde-claro: #244b7d;
            --bege: #e1eaf3;
            --bege-claro: #f5f8fb;
            --ouro: #6f8fb4;
            --ouro-claro: #a9bfd6;
            --texto-escuro: #172235;
            --texto-claro: #52657b;
        }

        /* cabeçalho com a nova logo */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 0 1rem 0;
            border-bottom: 2px solid #cbd9e7;
            flex-wrap: wrap;
            gap: 0.8rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            text-decoration: none;
        }

        .logo-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
        }

        .logo-icon .eco {
            font-family: "Playfair Display", serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--verde-escuro);
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .logo-icon .ville {
            font-family: "Playfair Display", serif;
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--verde-escuro);
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-top: -4px;
        }

        

        .logo-bakara {
            align-items: center;
            display: flex;
            font-family: "Playfair Display", serif;
            font-size: 2.2rem;
            font-weight: 600;
            color: var(--verde-escuro);
            letter-spacing: 1px;
        }

        .logo-bakara::before {
            background: var(--ouro);
            content: "";
            height: 40px;
            margin-right: 0.8rem;
            opacity: 0.65;
            width: 2px;
        }

        .logo-bakara span {
            color: var(--ouro);
            font-weight: 400;
        }

        .logo-bakara small {
            display: block;
            font-size: 0.65rem;
            font-family: "Inter", sans-serif;
            font-weight: 400;
            color: var(--texto-claro);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: -2px;
        }

        .nav-links {
            display: flex;
            gap: 2.2rem;
            font-weight: 500;
            color: var(--verde-escuro);
            align-items: center;
        }
        .nav-links a {
            text-decoration: none;
            color: inherit;
            transition: color 0.2s;
            font-size: 0.95rem;
        }
        .nav-links a:hover {
            color: var(--ouro);
        }

        .badge-morador {
            background: var(--verde-escuro);
            color: #f5f8fb;
            padding: 0.35rem 1.4rem;
            border-radius: 40px;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.3px;
            border: 1px solid var(--verde-escuro);
            transition: 0.2s;
        }
        .badge-morador:hover {
            background: var(--verde-claro);
            border-color: var(--verde-claro);
        }

        /* hero interno */
        .hero-morador {
            background: var(--bege);
            border-radius: 32px;
            padding: 2.2rem 2.8rem;
            margin: 2.2rem 0 2.8rem 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.7), 0 4px 12px rgba(20, 47, 92, 0.06);
            border: 1px solid #cbd9e7;
        }
        .hero-morador h1 {
            font-family: "Playfair Display", serif;
            font-size: 2.2rem;
            font-weight: 500;
            color: var(--verde-escuro);
        }
        .hero-morador h1 small {
            display: block;
            font-size: 1rem;
            font-family: "Inter", sans-serif;
            font-weight: 400;
            color: var(--texto-claro);
            margin-top: 0.2rem;
        }
        .hero-morador .destaque {
            background: white;
            padding: 0.5rem 1.6rem;
            border-radius: 60px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--verde-escuro);
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
            white-space: nowrap;
            border: 1px solid var(--ouro-claro);
        }
        .hero-morador .destaque i {
            font-style: normal;
            margin-right: 6px;
        }

        /* cards de serviços */
        .servicos-morador {
            display: flex;
            flex-wrap: wrap;
            gap: 1.2rem;
            margin-bottom: 2.8rem;
        }
        .servico-item {
            background: #f9fbfd;
            border-radius: 24px;
            padding: 1.2rem 1.6rem;
            flex: 1 1 160px;
            box-shadow: 0 4px 12px rgba(20, 47, 92, 0.05);
            border: 1px solid var(--bege);
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }
        .servico-item:hover {
            border-color: var(--ouro);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(20, 47, 92, 0.08);
        }
        .servico-item .icone {
            font-size: 1.8rem;
            line-height: 1;
        }
        .servico-item .info {
            font-weight: 500;
            color: var(--verde-escuro);
            font-size: 0.95rem;
        }
        .servico-item .info span {
            display: block;
            font-weight: 400;
            font-size: 0.75rem;
            color: var(--texto-claro);
            margin-top: 2px;
        }

        /* galeria */
        .galeria {
            margin: 2.5rem 0 3rem 0;
        }
        .galeria h2 {
            font-family: "Playfair Display", serif;
            font-weight: 400;
            font-size: 2rem;
            border-left: 4px solid var(--ouro);
            padding-left: 1rem;
            margin-bottom: 2rem;
            color: var(--verde-escuro);
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        .galeria h2 small {
            font-family: "Inter", sans-serif;
            font-size: 0.85rem;
            font-weight: 400;
            color: var(--texto-claro);
            margin-left: 0.5rem;
        }

        .grid-fotos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 1.5rem;
        }

        .card-foto {
            background: #f9fbfd;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(20, 47, 92, 0.07);
            transition: transform 0.2s, box-shadow 0.25s;
            border: 1px solid #d8e3ee;
        }
        .card-foto:hover {
            transform: translateY(-5px);
            box-shadow: 0 14px 28px rgba(20, 47, 92, 0.08);
        }
        .card-foto img {
            width: 100%;
            height: 190px;
            object-fit: cover;
            display: block;
            background: #d8e3ee;
        }
        .card-foto .legenda {
            padding: 0.9rem 1.2rem 1.1rem;
            font-weight: 450;
            color: var(--verde-escuro);
            background: #f9fbfd;
            font-size: 0.95rem;
            border-top: 1px solid #d8e3ee;
        }
        .card-foto .legenda span {
            display: block;
            font-size: 0.75rem;
            color: var(--texto-claro);
            margin-top: 0.2rem;
            font-weight: 400;
        }

        .img-placeholder {
            background: linear-gradient(145deg, #d8e3ee, #b9cadd);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--texto-claro);
            font-weight: 300;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        /* login */
        .login-morador {
            background: var(--bege);
            border-radius: 40px;
            padding: 2.5rem 2.8rem;
            margin: 2.5rem 0 3rem 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            border: 1px solid #cbd9e7;
            box-shadow: 0 4px 16px rgba(20, 47, 92, 0.05);
        }

        .login-texto h3 {
            font-family: "Playfair Display", serif;
            font-size: 1.8rem;
            font-weight: 400;
            color: var(--verde-escuro);
            margin-bottom: 0.2rem;
        }
        .login-texto p {
            color: var(--texto-claro);
            font-size: 0.95rem;
        }
        .login-texto .tag {
            display: inline-block;
            background: var(--verde-escuro);
            color: #f5f8fb;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 0.2rem 1rem;
            border-radius: 40px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-top: 0.4rem;
        }

        .login-form {
            flex: 2 1 340px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.8rem 1rem;
            background: #f9fbfd;
            padding: 0.9rem 1.5rem 0.9rem 1.8rem;
            border-radius: 80px;
            box-shadow: 0 2px 12px rgba(20, 47, 92, 0.06);
            border: 1px solid #cbd9e7;
        }
        .login-form input {
            flex: 1 1 120px;
            border: none;
            padding: 0.7rem 0.2rem;
            font-size: 0.95rem;
            background: transparent;
            border-bottom: 1px solid #cbd9e7;
            outline: none;
            transition: border 0.2s;
            min-width: 100px;
        }
        .login-form input:focus {
            border-bottom-color: var(--ouro);
        }
        .login-form input::placeholder {
            color: #8295aa;
            font-weight: 300;
        }
        .login-form button {
            background: var(--verde-escuro);
            color: white;
            border: none;
            padding: 0.7rem 2.2rem;
            border-radius: 40px;
            font-weight: 500;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
            letter-spacing: 0.3px;
        }
        .login-form button:hover {
            background: var(--verde-claro);
        }
        .login-extra {
            font-size: 0.8rem;
            color: var(--texto-claro);
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }
        .login-extra a {
            color: var(--verde-escuro);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px dotted var(--ouro);
        }
        .login-extra a:hover {
            color: var(--ouro);
        }

        /* rodapé */
        .footer {
            margin-top: 2rem;
            padding: 2rem 0 1.8rem;
            border-top: 1px solid #cbd9e7;
            text-align: center;
            font-size: 0.85rem;
            color: var(--texto-claro);
        }
        .footer .logo-mini {
            font-family: "Playfair Display", serif;
            font-size: 1.4rem;
            color: var(--verde-escuro);
        }
        .footer .logo-mini span {
            color: var(--ouro);
        }
        .footer .endereco {
            font-size: 0.75rem;
            color: var(--texto-claro);
            margin-top: 0.3rem;
        }
        .marca-panet {
            font-weight: 700;
            text-decoration: none;
        }
        .marca-panet .pa { color: #ff8324; }
        .marca-panet .net { color: #0067da; }
        .marca-panet:hover,
        .marca-panet:focus-visible {
            text-decoration: underline;
        }

        /* responsivo */
        @media (max-width: 780px) {
            .navbar {
                flex-direction: column;
                align-items: stretch;
                gap: 0.5rem;
            }
            .nav-links {
                justify-content: center;
                flex-wrap: wrap;
                gap: 0.8rem 1.5rem;
            }
            .hero-morador {
                flex-direction: column;
                text-align: center;
                padding: 2rem 1.5rem;
            }
            .hero-morador .destaque {
                white-space: normal;
                width: 100%;
                text-align: center;
            }
            .login-morador {
                flex-direction: column;
                align-items: stretch;
                padding: 2rem 1.5rem;
                border-radius: 32px;
            }
            .login-form {
                flex-direction: column;
                align-items: stretch;
                border-radius: 28px;
                padding: 1.5rem;
                gap: 1rem;
                background: white;
            }
            .login-form input {
                border-bottom: 1px solid #d6cfc4;
                padding: 0.8rem 0.2rem;
            }
            .login-form button {
                width: 100%;
                justify-content: center;
                padding: 0.9rem;
            }
            .login-extra {
                justify-content: center;
            }
            .grid-fotos {
                grid-template-columns: 1fr 1fr;
            }
            .logo-bakara {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 500px) {
            .container {
                padding: 0 1rem;
            }
            .grid-fotos {
                grid-template-columns: 1fr;
            }
            .servicos-morador {
                flex-direction: column;
            }
            .hero-morador h1 {
                font-size: 1.8rem;
            }
            .galeria h2 {
                font-size: 1.6rem;
            }
            .logo-icon .eco,
            .logo-icon .ville {
                font-size: 0.9rem;
            }
            .logo-divider {
                height: 30px;
            }
            .logo-bakara {
                font-size: 1.5rem;
            }
            .logo-bakara::before {
                height: 30px;
                margin-right: 0.55rem;
            }
        }

/* Correcoes finais para login e contato. */
.login-painel {
    background: rgba(247, 250, 252, 0.94);
    border: 1px solid var(--borda);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(20, 47, 92, 0.12);
    margin: 0 auto;
    max-width: 450px;
    padding: 2.8rem;
    width: 100%;
}
.login-painel h2 { color: var(--azul); font-family: "Playfair Display", serif; font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 500; line-height: 1.15; margin: 0.5rem 0 0.7rem; }
.login-painel .intro { color: var(--texto-claro, #52657b); font-size: 0.95rem; margin-bottom: 1.8rem; }
.login-painel .campo { display: block; margin-bottom: 1.15rem; }
.login-painel .campo span { color: var(--texto-escuro, #172235); display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 0.45rem; }
.login-painel .campo input { background: #fff; border: 1px solid #cbd9e7; border-radius: 8px; color: #172235; font: inherit; font-size: 0.95rem; outline: none; padding: 0.85rem 0.95rem; width: 100%; }
.login-painel .campo input:focus { border-color: #142f5c; box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
.opcoes { align-items: center; display: flex; justify-content: space-between; margin: 0.2rem 0 1.5rem; }
.lembrar { align-items: center; color: #52657b; display: flex; font-size: 0.8rem; gap: 0.45rem; }
.lembrar input { accent-color: #142f5c; height: 15px; width: 15px; }
.link-acao { color: #142f5c; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.link-acao:hover, .link-acao:focus-visible { color: #244b7d; text-decoration: underline; }
.login-painel button, .contato-grid button { background: #142f5c; border: 0; border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.9rem 1rem; width: 100%; }
.login-painel button:hover, .login-painel button:focus-visible, .contato-grid button:hover, .contato-grid button:focus-visible { background: #244b7d; }
.contato-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.contato-grid .painel { background: rgba(247, 250, 252, 0.95); border: 1px solid #cbd9e7; border-radius: 18px; box-shadow: 0 14px 35px rgba(20, 47, 92, 0.09); padding: 2rem; }
.contato-grid .campo input, .contato-grid .campo textarea { background: #fff; border: 1px solid #cbd9e7; border-radius: 8px; color: #172235; font: inherit; padding: 0.8rem 0.9rem; width: 100%; }
.contato-grid .campo textarea { min-height: 125px; resize: vertical; }
.contato-grid .campo input:focus, .contato-grid .campo textarea:focus { border-color: #142f5c; box-shadow: 0 0 0 3px rgba(20, 47, 92, 0.12); }
.mapa { min-height: 100%; overflow: hidden; padding: 0 !important; }
.mapa h2 { padding: 2rem 2rem 0; }
.mapa iframe { border: 0; display: block; min-height: 390px; width: 100%; }
.mapa-legenda { color: #52657b; font-size: 0.82rem; padding: 0.8rem 2rem 1.2rem; }

@media (max-width: 780px) {
    .contato-grid { grid-template-columns: 1fr; }
    .contato-grid .painel { padding: 1.5rem; }
    .mapa h2 { padding: 1.5rem 1.5rem 0; }
    .mapa-legenda { padding-left: 1.5rem; padding-right: 1.5rem; }
    .mapa iframe { min-height: 300px; }
    .login-painel { border-radius: 18px; padding: 2rem 1.35rem; }
    .opcoes { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
}