/* Identidade visual oficial — Imóveis da Caixa SP (logo 10 Final, aprovado em 05/11/2026)
   Paleta extraída do arquivo original (assets/marca/PALETA.md). O site se adapta ao logotipo, nunca o contrário. */
:root{
  --azul:#0A66B3;        /* azul institucional (símbolo) */
  --azul-escuro:#08528F; /* azul institucional 20% mais escuro, para hover e títulos */
  --azul2:#1394B6;       /* azul-ciano (lettering) */
  --ciano-claro:#28ADC4; /* ciano claro (símbolo) */
  --laranja:#EC8A31;     /* laranja (SP) — só pequenos destaques */
  --papel:#F5EEEB;       /* fundo do original */
  --verde:#1394B6;       /* destaques positivos usam o ciano da marca */
  --txt:#1C2B36;
  --sub:#5A6874;
  --borda:#E6E2DE;
  --fundo:#FAF8F6;
  --branco:#fff;
}
body.marca-oficial{background:var(--fundo);color:var(--txt)}
.marca-oficial h1,.marca-oficial h2{color:var(--azul-escuro)}
.marca-oficial a{color:var(--azul)}

/* Cabeçalho: fundo igual ao papel do original, logo sem bordas nem cortes */
.marca-oficial .topo{background:var(--papel);border-bottom:1px solid var(--borda)}
.marca-oficial .topo-in{min-height:84px}
.marca-oficial .marca{display:block;line-height:0}
.marca-oficial .logo-oficial img{display:block;height:68px;width:auto;max-width:none}
.marca-oficial .menu a{color:var(--txt)}
.marca-oficial .menu a:not(.btn):hover{color:var(--azul)}
.marca-oficial .aviso-oficial{background:#fff;border-bottom:1px solid var(--borda);color:var(--sub)}

/* Botões */
.marca-oficial .btn-prim{background:var(--azul);color:#fff}
.marca-oficial .btn-prim:hover{background:var(--azul-escuro)}
.marca-oficial .btn-sec{background:#fff;color:var(--azul);border-color:var(--azul)}
.marca-oficial .btn-alerta{background:var(--laranja);color:#fff!important}

/* Destaque principal: azul institucional → ciano, cores do símbolo */
.marca-oficial .hero{background:linear-gradient(120deg,var(--azul) 0%,var(--azul2) 100%)}
.marca-oficial .hero-box{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.marca-oficial .hero h1,.marca-oficial .hero h2{color:#fff}
.marca-oficial .hero .btn-prim{background:var(--laranja);color:#fff}
.marca-oficial .hero .btn-prim:hover{background:#D97A22}
.marca-oficial .hero .btn-sec{background:#fff;color:var(--azul);border-color:#fff}
.marca-oficial .secao-cta h2{color:var(--azul-escuro)}

/* Cartões e etiquetas */
.marca-oficial .card{border-color:var(--borda);box-shadow:0 1px 2px rgba(10,102,179,.05)}
.marca-oficial .card:hover{box-shadow:0 6px 18px rgba(10,102,179,.12)}
.marca-oficial .card-preco{color:var(--azul-escuro)}
.marca-oficial .selo-desconto{background:var(--laranja)}
.marca-oficial .tag{background:#EAF3FA;color:var(--azul)}
.marca-oficial .tag-fin{background:#E4F4F7;color:#0D7891}
.marca-oficial .tag-novo{background:#FDEEDF;color:#A85A14}
.marca-oficial .tag-compra_direta{background:#EAF3FA;color:var(--azul-escuro)}
.marca-oficial .caixa-preco .desconto{color:#0D7891}
.marca-oficial .caixa-preco .preco{color:var(--azul-escuro)}

/* Formulários */
.marca-oficial .form input:not([type=checkbox]):focus,.marca-oficial .form select:focus,.marca-oficial .form textarea:focus{outline:2px solid var(--azul2);outline-offset:0;border-color:var(--azul2)}
.marca-oficial .destaque-campo input{border-color:var(--azul2)!important;box-shadow:0 0 0 2px #D7EEF4}
.marca-oficial .ok-geral{background:#E4F4F7;color:#0D7891}
.marca-oficial .info{background:#EAF3FA;border-color:#CFE3F3}
.marca-oficial .destaque-proposta{background:#FDF3E8;border-color:#F3CFA8}

/* Rodapé claro com o logotipo */
.marca-oficial .rodape{background:var(--papel);color:var(--sub);border-top:1px solid var(--borda)}
.marca-oficial .rodape a{color:var(--azul)}
.marca-oficial .rodape strong{color:var(--txt)}
.marca-oficial .rodape-logo{display:block;margin-bottom:10px;line-height:0}
.marca-oficial .rodape-logo img{height:56px;width:auto}

@media (max-width:860px){
  .marca-oficial .topo-in{min-height:64px;padding-top:6px;padding-bottom:6px}
  .marca-oficial .logo-oficial img{height:48px}
  .marca-oficial .menu{width:100%;justify-content:flex-start;gap:14px;padding-bottom:6px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .marca-oficial .menu::-webkit-scrollbar{display:none}
  .marca-oficial .menu a:not(.btn){font-size:.88rem}
  .marca-oficial .menu .btn{padding:7px 12px;font-size:.88rem}
  .marca-oficial .menu .btn-alerta{order:-1}
  .marca-oficial .aviso-oficial{font-size:.74rem}
}
@media (max-width:420px){
  .marca-oficial .logo-oficial img{height:42px}
}