/* ==================================================================
   Pacaembu Rio Preto — hub dos empreendimentos
   Estrutura e paleta espelhadas do site oficial da Pacaembu.
================================================================== */

:root {
  --azul:        #0d3448;
  --azul-esc:    #082633;
  --azul-claro:  #14485f;
  --vermelho:    #e30613;
  --vermelho-esc:#c40510;
  --amarelo:     #f5b720;
  --amarelo-esc: #dda40f;
  --verde-wa:    #22a45d;
  --cinza:       #f3f5f7;
  --cinza-azul:  #eef2f5;
  --borda:       #e2e7ea;
  --texto:       #16242c;
  --texto-suave: #5b6b74;
  --branco:      #ffffff;

  --raio:     14px;
  --raio-sm:  10px;
  --wrap:     1200px;
  --sombra:   0 1px 2px rgba(13, 52, 72, .06), 0 10px 30px rgba(13, 52, 72, .07);
  --sombra-fm:0 20px 50px rgba(0, 0, 0, .18);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }

.wrap { width: min(100% - 36px, var(--wrap)); margin-inline: auto; }
.dot { opacity: .45; padding: 0 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn--amarelo { background: var(--amarelo); color: var(--azul-esc); }
.btn--amarelo:hover { background: var(--amarelo-esc); }
.btn--vermelho { background: var(--vermelho); color: var(--branco); }
.btn--vermelho:hover { background: var(--vermelho-esc); }
.btn--wa { background: var(--verde-wa); color: var(--branco); }
.btn--wa:hover { background: #1c8c4f; }
.btn--linha {
  background: transparent;
  color: var(--branco);
  border: 1px solid rgba(255, 255, 255, .38);
}
.btn--linha:hover { background: rgba(255, 255, 255, .1); }
.btn--sm { font-size: 12.5px; padding: 10px 16px; }
.btn--lg { font-size: 15px; padding: 17px 30px; }
.btn--bloco { width: 100%; }

/* ícone do WhatsApp desenhado em CSS pra não carregar arquivo */
.ico-wa {
  width: 17px; height: 17px; flex: none;
  background: currentColor;
  -webkit-mask: var(--wa) center / contain no-repeat;
  mask: var(--wa) center / contain no-repeat;
}
:root {
  --wa: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.16c-.24.68-1.4 1.3-1.94 1.35-.5.05-.98.23-3.3-.69-2.77-1.09-4.53-3.92-4.67-4.1-.13-.18-1.11-1.48-1.11-2.82 0-1.34.7-2 .95-2.27.25-.27.54-.34.72-.34h.52c.17 0 .39-.06.61.47.23.55.78 1.9.85 2.04.07.14.11.3.02.48-.09.18-.13.29-.27.45-.13.16-.28.35-.4.47-.13.13-.27.28-.12.55.15.27.66 1.09 1.42 1.77.98.87 1.8 1.14 2.07 1.27.27.13.42.11.58-.07.16-.18.67-.78.85-1.05.18-.27.36-.22.61-.13.25.09 1.59.75 1.86.89.27.13.45.2.52.31.07.11.07.63-.17 1.31z'/%3E%3C/svg%3E");
}

/* ---------- títulos de seção ---------- */
.secao { padding: 62px 0; }
.secao--cinza { background: var(--cinza); }
.secao--azul { background: var(--azul); color: var(--branco); }
.eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: 12px;
}
.eyebrow--claro { color: var(--amarelo); }
.titulo {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(25px, 4.6vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--azul);
}
.secao--azul .titulo { color: var(--branco); }
.sub {
  color: var(--texto-suave);
  font-size: 15px;
  margin-top: 14px;
  max-width: 62ch;
}
.centro { text-align: center; }
.centro .sub { margin-inline: auto; }

/* ==================================================================
   HEADER
================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--azul-esc);
  color: var(--branco);
}
.topo__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 10px 0;
}
.topo__logo img {
  height: 26px;
  width: auto;
  background: var(--branco);
  padding: 6px 9px;
  border-radius: 6px;
  box-sizing: content-box;
}
.topo__nav { display: none; }
.topo__acoes { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.topo__menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 38px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 9px;
  cursor: pointer;
}
.topo__menu span { display: block; height: 2px; background: var(--branco); border-radius: 2px; }
.topo__cta-texto { display: none; }

/* menu mobile aberto */
.topo__nav[data-aberto="1"] {
  display: block;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--azul-esc);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 8px 0 16px;
}
.topo__nav[data-aberto="1"] ul { width: min(100% - 36px, var(--wrap)); margin-inline: auto; }
.topo__nav a {
  display: block;
  padding: 13px 2px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ==================================================================
   HERO
================================================================== */
.hero {
  position: relative;
  background: var(--azul);
  color: var(--branco);
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 38, 51, .95) 0%, rgba(8, 38, 51, .86) 42%, rgba(8, 38, 51, .55) 100%);
}
.hero__copy {
  position: relative;
  padding: 58px 0 66px;
  max-width: 620px;
}
.hero__tag {
  display: inline-block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-esc);
  background: var(--amarelo);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero__titulo {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(30px, 6.6vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.hero__titulo em { font-style: normal; color: var(--amarelo); }
.hero__texto {
  font-size: 15.5px;
  color: rgba(255, 255, 255, .82);
  margin: 18px 0 26px;
  max-width: 52ch;
}
.hero__botoes { display: flex; flex-wrap: wrap; gap: 11px; }

/* ---------- barra vermelha de busca ---------- */
.busca {
  position: relative;
  z-index: 2;
  background: var(--vermelho);
  color: var(--branco);
}
.busca__form {
  display: grid;
  gap: 10px;
  padding: 18px 0;
  align-items: center;
}
.busca__titulo {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.busca select {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
}

/* ==================================================================
   EMPREENDIMENTOS
================================================================== */
.grade-imoveis { display: grid; gap: 20px; margin-top: 32px; }

/* card em destaque: foto em cima, conteudo embaixo no mobile;
   lado a lado a partir do tablet */
.imovel {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: grid;
}
.imovel__foto { position: relative; }
.imovel__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* os selos ficam numa fila: um card pode ter mais de um (lançamento,
   condomínio fechado...) sem que eles se sobreponham */
.imovel__selos {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.imovel__selo {
  background: var(--amarelo);
  color: var(--azul-esc);
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(8, 38, 51, .22);
}
/* o branco pode cair sobre céu claro; a sombra segura o recorte */
.imovel__selo--claro { background: var(--branco); color: var(--azul); }
.imovel__corpo { padding: 24px 22px 26px; display: flex; flex-direction: column; }
.imovel__nome {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(21px, 3.4vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--azul);
  line-height: 1.2;
}
.imovel__local { font-size: 13.5px; color: var(--texto-suave); margin-top: 5px; }
.imovel__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px 14px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.imovel__specs li {
  font-size: 13px;
  color: var(--texto-suave);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.imovel__specs li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--vermelho);
  flex: none;
}
.imovel__preco { margin-bottom: 20px; }
.imovel__preco span { display: block; font-size: 12px; color: var(--texto-suave); }
.imovel__preco strong {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vermelho);
}
.imovel__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.imoveis__vazio {
  margin-top: 26px;
  padding: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--texto-suave);
  background: var(--branco);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}
.imoveis__nota {
  margin-top: 22px;
  font-size: 13px;
  color: var(--texto-suave);
  text-align: center;
}

/* ==================================================================
   FINANCIAMENTO
================================================================== */
.fin { background: var(--cinza-azul); }
.fin__grid { display: grid; gap: 30px; align-items: center; }
.fin__vantagens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 24px 0;
}
.fin__vantagens li {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 14px 12px;
  text-align: center;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--azul);
}
.fin__vantagens strong {
  display: block;
  font-size: 19px;
  color: var(--vermelho);
  letter-spacing: -.02em;
  margin-bottom: 3px;
}
.fin__nota { font-size: 11.5px; color: var(--texto-suave); margin-top: 14px; }
.fin__media { position: relative; }
.fin__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); }
.fin__media::after {
  content: "";
  position: absolute;
  right: -10px; bottom: -10px;
  width: 46%; height: 16px;
  background: var(--vermelho);
  border-radius: 4px;
  z-index: -1;
}

/* ==================================================================
   NÚMEROS
================================================================== */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 34px;
}
.numeros li { text-align: center; }
.numeros strong {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(26px, 5.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--vermelho);
  line-height: 1;
}
.numeros span { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 7px; }

/* ==================================================================
   PILARES (cards com foto)
================================================================== */
.pilares { display: grid; gap: 16px; margin-top: 34px; }
.pilar {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: var(--branco);
}
.pilar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pilar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 38, 51, .93) 6%, rgba(8, 38, 51, .35) 58%, rgba(8, 38, 51, .12) 100%);
}
.pilar__texto { position: relative; z-index: 1; padding: 22px 20px; }
.pilar h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 7px;
}
.pilar p { font-size: 13.5px; color: rgba(255, 255, 255, .82); }

/* ==================================================================
   CTA FINAL
================================================================== */
.cta { background: var(--azul); color: var(--branco); }
.cta__grid { display: grid; gap: 26px; align-items: center; }
.cta__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); }
.cta__card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio);
  padding: 28px 24px;
}
.cta__card h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(22px, 4.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.cta__card p { font-size: 14.5px; color: rgba(255, 255, 255, .8); margin: 14px 0 22px; }
.cta__micro { font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 14px; }

/* ==================================================================
   RODAPÉ
================================================================== */
.rodape { background: var(--azul-esc); color: rgba(255, 255, 255, .68); font-size: 13px; padding: 44px 0 0; }
.rodape__topo { display: grid; gap: 28px; padding-bottom: 32px; }
.rodape__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.rodape__logos img {
  height: 30px; width: auto;
  background: var(--branco);
  padding: 8px 12px;
  border-radius: 8px;
  box-sizing: content-box;
}
.rodape__logo-imob { height: 34px; padding: 6px 12px; }
.rodape__sobre { max-width: 42ch; line-height: 1.6; }
.rodape__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.rodape h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 13px;
}
.rodape__cols li { margin-bottom: 9px; }
.rodape__cols a:hover { color: var(--branco); }
.rodape__fone {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--branco);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0 26px;
  font-size: 12px;
  line-height: 1.7;
}
.rodape__base a { text-decoration: underline; }
.rodape__base strong { color: rgba(255, 255, 255, .88); font-weight: 700; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--verde-wa);
  color: var(--branco);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.wa-float:hover { background: #1c8c4f; }

/* ---------- CTA flutuante da vitrine ----------
   Substitui o .wa-float verde no hub. Amarelo da marca com texto escuro:
   verde e a cor do WhatsApp e prometeria conversa, nao a lista de casas.
   A regra .wa-float acima fica de pe porque o rodape ainda usa o link de
   WhatsApp e um dia o flutuante pode voltar. */
.cta-float {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--amarelo);
  color: var(--texto);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  transition: background .2s ease;
}
.cta-float:hover { background: var(--amarelo-esc); }
.cta-float__txt { white-space: nowrap; }

/* Seta pra baixo em CSS, sem arquivo extra. Herda a cor do texto. */
.cta-float__ico {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.cta-float__ico::after {
  content: "";
  position: absolute;
  left: 50%; top: 45%;
  width: 9px; height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- aviso de cookies no rodape ---------- */
.rodape__cookies {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: .78;
}
.rodape__cookies a { text-decoration: underline; white-space: nowrap; }
.rodape__cookies .cookies--recusado { text-decoration: none; opacity: .7; }

/* ==================================================================
   TABLET
================================================================== */
@media (min-width: 700px) {
  .secao { padding: 78px 0; }
  .busca__form { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .imovel__corpo { padding: 30px 30px 32px; }
  .numeros { grid-template-columns: repeat(5, 1fr); }
  .pilares { grid-template-columns: repeat(3, 1fr); }
  .fin__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .fin__vantagens { grid-template-columns: repeat(3, 1fr); }
  .cta__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .rodape__topo { grid-template-columns: 1.2fr 2fr; gap: 44px; }
  .rodape__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ==================================================================
   DESKTOP
================================================================== */
@media (min-width: 1000px) {
  .topo__menu { display: none; }
  .topo__cta-texto { display: inline; }
  .topo__nav { display: block; margin-left: 22px; }
  .topo__nav ul { display: flex; gap: 26px; }
  .topo__nav a {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    padding: 4px 0;
    border: 0;
  }
  .topo__nav a:hover { color: var(--branco); }
  .hero__copy { padding: 92px 0 104px; }
  .grade-imoveis { margin-top: 40px; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

/* respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}