/* ============================================================================
   Tema "padrão da rede Lopes" (referência: template Kenlo usado pelas franquias)
   Carregado DEPOIS de site.css — estas regras vencem. As classes .rd-* são dos
   blocos novos (galeria 2-up, preço grande, card de contato, relacionados…).
   ============================================================================ */

:root {
  --rd-vermelho: #ec1b4b;          /* cor de destaque da rede */
  --rd-vermelho-escuro: #c4153f;   /* 5,96:1 sobre branco — fundo de botão e texto pequeno */
  --rd-vermelho-forte: #a5123a;    /* 7,94:1 sobre branco — estado :hover */
  --rd-tinta: #1a1a1a;
  --rd-texto: #3d3d3d;
  --rd-cinza: #6d6d6d;
  --rd-borda: #e6e6e6;
  --rd-fundo: #f7f7f7;
  --rd-texto-font: "Open Sans", Arial, Helvetica, sans-serif;
  --rd-titulo-font: "Red Hat Display", "Open Sans", Arial, Helvetica, sans-serif;
  --rd-raio: 8px;
}

/* ---------- base ---------- */
body { font-family: var(--rd-texto-font); color: var(--rd-texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--rd-titulo-font); color: var(--rd-tinta); }
a { color: var(--rd-vermelho-escuro); }
a:hover { color: var(--rd-vermelho-forte); }
/* largura fluida: o layout acompanha a tela (como no site da rede), sem largura fixa */
.shell, .rd-shell { width: 100%; max-width: none; margin: 0; padding: 0 clamp(16px, 2vw, 48px); }
.rd-shell { box-sizing: border-box; }

/* ---------- cabeçalho: mantém o menu horizontal no desktop (o hambúrguer
   continua aparecendo só no celular, como o site.css já definia) ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--rd-borda); }
.site-header .header-row { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.nav-toggle svg { width: 30px; height: 30px; fill: var(--rd-vermelho); }

/* ---------- rodapé escuro ---------- */
.site-footer { background: #111; color: #cfcfcf; border-top: 0; }
.site-footer h2 { color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: .01em; margin-bottom: 14px; }
.site-footer a { color: #cfcfcf; }
/* botões no rodapé mantêm texto branco: a regra .site-footer a (cinza) vencia o
   color:#fff dos botões e derrubava o contraste para 3,38:1 sobre o verde */
.site-footer .button, .site-footer .rd-btn, .site-footer .button-wpp { color: #fff; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-col p { color: #cfcfcf; }
.site-footer .social-row a { background: transparent; border: 1px solid #3a3a3a; }
.site-footer .social-row a:hover { background: var(--rd-vermelho); border-color: var(--rd-vermelho); }
.site-footer hr, .site-footer .footer-divider { border-color: #2a2a2a; }
.site-footer .footer-bottom { color: #8a8a8a; font-size: .82rem; }

/* ---------- botões ---------- */
.button, .rd-btn {
  background: var(--rd-vermelho-escuro);   /* 5,96:1 sobre o texto branco (o #ec1b4b dava 4,35:1) */
  color: #fff;
  border: 0;
  border-radius: var(--rd-raio);
  font-family: var(--rd-texto-font);
  font-weight: 600;
  padding: 12px 20px;
}
.button:hover, .rd-btn:hover { background: var(--rd-vermelho-forte); color: #fff; }
/* WhatsApp: o verde acessível do próprio site (#007A36 = 5,34:1). O verde-claro
   do WhatsApp (#25d366) dava 1,98:1 e reprovava no contraste. */
.button-wpp { background: var(--verde-wpp); }
.button-wpp:hover { background: #07863c; }

/* ---------- trilha de navegação ---------- */
.rd-trilha { font-size: .82rem; color: var(--rd-cinza); padding: 16px 0 0; }
.rd-trilha a { color: var(--rd-cinza); }
.rd-trilha span { margin: 0 6px; }
.rd-codigo { display: inline-block; border: 1px solid var(--rd-borda); border-radius: 4px; padding: 2px 8px; font-size: .78rem; color: var(--rd-texto); margin: 8px 0; }

/* ---------- seções: fundo branco, título escuro, divisória fina ---------- */
.rd-secao { background: #fff; border-top: 1px solid var(--rd-borda); padding: 26px 0; }
.rd-secao__titulo { font-size: 1.28rem; font-weight: 600; color: var(--rd-tinta); margin-bottom: 16px; }
.rd-secao p { font-size: .95rem; line-height: 1.65; }

/* ---------- galeria 2-up da página do imóvel ---------- */
.rd-galeria { display: grid; grid-template-columns: 1.15fr 1fr .35fr; gap: 8px; overflow: hidden; position: relative; }
.rd-galeria picture, .rd-galeria a { display: block; height: 340px; overflow: hidden; background: var(--rd-fundo); }
.rd-galeria img { width: 100%; height: 100%; object-fit: cover; }
.rd-galeria__pilulas { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.rd-pilula {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--rd-tinta);
  border-radius: 999px; padding: 8px 14px;
  font-size: .84rem; font-weight: 600;
}
.rd-galeria__seta {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fff; color: var(--rd-tinta); cursor: pointer; z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* ---------- preço + atributos ---------- */
.rd-preco { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 10px; }
.rd-preco__titulo { font-size: .9rem; font-weight: 500; color: var(--rd-cinza); margin: 0; }
.rd-preco__valor { font-family: var(--rd-titulo-font); font-weight: 800; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -1.2px; color: var(--rd-tinta); }

.rd-atributos { display: flex; flex-wrap: wrap; gap: 12px 34px; padding: 18px 0; border-top: 1px solid var(--rd-borda); }
.rd-atributo { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--rd-texto); }
.rd-atributo svg { width: 22px; height: 22px; fill: var(--rd-vermelho); flex: none; }
.rd-atributo b { display: block; font-weight: 400; color: var(--rd-cinza); font-size: .78rem; }
.rd-atributo strong { display: block; font-weight: 600; color: var(--rd-tinta); font-size: .95rem; }

/* ---------- card "Entrar em contato" ---------- */
.rd-contato { border: 1px solid var(--rd-borda); border-radius: 10px; background: #fff; padding: 22px; box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
.rd-contato h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; }
.rd-contato label { display: block; font-size: .8rem; color: var(--rd-cinza); margin-bottom: 10px; }
.rd-contato input, .rd-contato textarea {
  width: 100%; border: 1px solid var(--rd-borda); border-radius: 6px;
  padding: 11px 12px; font-family: var(--rd-texto-font); font-size: .92rem; color: var(--rd-tinta);
}
.rd-contato input:focus, .rd-contato textarea:focus { outline: 2px solid rgba(236, 27, 75, .25); border-color: var(--rd-vermelho); }
.rd-contato .rd-aviso { font-size: .72rem; color: var(--rd-cinza); margin: 10px 0 14px; }
.rd-contato .button { width: 100%; }
.rd-campo-tel { position: relative; }
.rd-campo-tel .rd-tel-icone { position: absolute; right: 12px; top: 12px; }

/* ---------- características (2 colunas, ✓ rosa) ---------- */
.rd-caracteristicas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.rd-caracteristicas li { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--rd-texto); }
.rd-caracteristicas svg { width: 15px; height: 15px; fill: var(--rd-vermelho); flex: none; }
.rd-vermais { background: none; border: 0; padding: 0; margin-top: 14px; color: var(--rd-vermelho-escuro); font-weight: 600; font-size: .88rem; cursor: pointer; }

/* ---------- relacionados: foto + etiqueta de preço ---------- */
.rd-relacionados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rd-relacionado { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rd-fundo); }
.rd-relacionado img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.rd-relacionado:hover img { transform: scale(1.04); }
.rd-relacionado__preco {
  position: absolute; left: 10px; bottom: 10px;
  background: var(--rd-vermelho-escuro); color: #fff;
  font-size: .88rem; font-weight: 700; padding: 6px 10px; border-radius: 4px;
}
.rd-relacionado__bairro {
  position: absolute; left: 0; right: 0; top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent);
  color: #fff; font-size: .8rem; padding: 8px 10px;
}

@media (max-width: 1024px) {
  .rd-galeria { grid-template-columns: 1fr 1fr; }
  .rd-galeria picture:nth-child(3) { display: none; }
  .rd-relacionados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rd-galeria { grid-template-columns: 1fr; }
  .rd-galeria picture:nth-child(2) { display: none; }
  .rd-caracteristicas { grid-template-columns: 1fr; }
  .rd-relacionados { grid-template-columns: 1fr; }
  .rd-preco__valor { font-size: 1.9rem; }
}