/* ============================================================
   cor-da-conta.css — modelo CLÁSSICO pintado com a cor da CONTA.

   O clássico nasceu do site da conta piloto: estilo.css e as artes (fundo do topo, faixa do menu)
   são vermelhos #DC1921. Uma conta com outra cor primária (ex.: a demo, #0F766E) abria o
   site com menu e fundo VERMELHOS. O Layout só carrega esta folha — e só põe
   `data-cor-conta` no <html> — quando a cor primária da conta NÃO é o vermelho das artes;
   quem é vermelho (a conta piloto) continua exatamente com o visual de sempre.

   A cor vem de `--primary` (branding da conta, injetado inline no <html>). Tudo aqui é
   escopado em html[data-cor-conta] para nunca vazar.
   ============================================================ */

html[data-cor-conta] {
  --cc-escuro: color-mix(in srgb, var(--primary) 62%, black);
  --cc-claro: color-mix(in srgb, var(--primary) 70%, white);
}

/* ---------- Topo da home: a foto tingida de vermelho ganha o tom da conta ----------
   A camada de cor com blend "color" mantém a luminosidade da foto e troca o matiz. */
html[data-cor-conta] #topo {
  background-color: var(--cc-escuro);
  background-image: linear-gradient(var(--primary), var(--primary)), url(../images/fundoviewport1.jpg);
  background-blend-mode: color, normal;
}
html[data-cor-conta] #topo .telefone .bend { background-color: var(--primary); }
html[data-cor-conta] #topo .itens-btn .flex a { color: var(--primary); }
/* Ícones dos atalhos são PNG vermelhos: neutros (grafite) para não brigar com a cor da conta. */
html[data-cor-conta] #topo .itens-btn .flex a img { filter: grayscale(1) brightness(0.45); }

/* ---------- Faixa do menu principal: desenhada em CSS na cor da conta ----------
   Mesma forma da arte (bg-menu-principal.png): borda esquerda inclinada + sombra grafite. */
html[data-cor-conta] #Linha1 #MenuPrincipal nav {
  background:
    linear-gradient(131.4deg, transparent 51px, var(--primary) 51px) 0 0 / 100% 100% no-repeat,
    linear-gradient(131.4deg, transparent 30px, #4d4c4c 30px, #4d4c4c 41px, transparent 41px) 0 100% / 100% 44px no-repeat;
}

/* ---------- Botões, títulos e destaques que o estilo.css pinta de vermelho ---------- */
html[data-cor-conta] .Color,
html[data-cor-conta] #ListaImoveis ul li .TituloImovel,
html[data-cor-conta] #ListaImoveis ul li .CaracteristicasImovel,
html[data-cor-conta] #ListaImoveis ul li .InfoImovel span,
html[data-cor-conta] #FinanciamentoConstrutora,
html[data-cor-conta] #FinanciamentoCaixa,
html[data-cor-conta] .container-desc-obs h2,
html[data-cor-conta] #ConteudoEncontreSeuImovel #FormularioBuscaImovel form .btn-show {
  color: var(--primary);
}

html[data-cor-conta] .bg-laranja-vivo,
html[data-cor-conta] #btn-poder-compra,
html[data-cor-conta] .ref li button,
html[data-cor-conta] #desbloquearfotos {
  background-color: var(--primary);
}

html[data-cor-conta] #Destaques #ConteudoDestaque .conjunto-casas .conteudo .titulo,
html[data-cor-conta] #Destaques #ConteudoDestaque .ImovelDestaque #Especificacoes button,
html[data-cor-conta] #MaisImoveis #Titulo,
html[data-cor-conta] #Ativo,
html[data-cor-conta] #MaisImoveis #Imoveis a.VerTodos,
html[data-cor-conta] #Linha3 #Rodape #Coluna2 div form input[type="submit"],
html[data-cor-conta] #FormMaisInformacoes input[type="button"],
html[data-cor-conta] #FormularioPesquisa input[type="button"],
html[data-cor-conta] #Lateral #SimuleFinanciamento h3,
html[data-cor-conta] .MenuBusca h2,
html[data-cor-conta] #FaleConosco form input[type="submit"],
html[data-cor-conta] #Opcoes,
html[data-cor-conta] .verMais {
  background: var(--primary);
}
html[data-cor-conta] .pags .pgsel,
html[data-cor-conta] #Paginacao .selected {
  background-color: var(--primary) !important;
}
html[data-cor-conta] #FormasPagamento #ConteudoFormasPagamento ul li .item a span {
  background-color: color-mix(in srgb, var(--primary) 80%, transparent);
}

html[data-cor-conta] .BorderRight { border-right-color: var(--primary); }
html[data-cor-conta] #Destaques #ConteudoDestaque .ImovelDestaque img { border-left-color: var(--primary); }
html[data-cor-conta] #Destaques #ConteudoDestaque .ImovelDestaque #Especificacoes div {
  border-top-color: var(--primary);
  border-bottom-color: var(--primary);
}
html[data-cor-conta] #MaisImoveis ul li {
  border-bottom-color: var(--primary);
  border-left-color: var(--primary);
}
html[data-cor-conta] #Opcoes ul li {
  border-right-color: var(--cc-escuro);
  border-left-color: var(--cc-claro);
}
html[data-cor-conta] #faq-lancamentos h2.descricaoTitulo { border-bottom-color: var(--primary); }
html[data-cor-conta] .faq-item { border-left-color: var(--primary); }
html[data-cor-conta] .field-style:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 7px var(--cc-claro);
}