@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&display=swap");

/* Bertoldi Vieira — componentes. Valores vêm de tokens.css; aqui só há estrutura. */

/* Títulos sempre em caixa alta espaçada */
.display, .titulo-1, .titulo-2, .titulo-3 { text-transform: uppercase; }

.bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  min-height: 48px;
  padding: var(--space-12) 28px;
  border: 1px solid transparent;
  border-radius: var(--raio-2);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.bv-btn:focus-visible,
.bv-link:focus-visible,
.bv-whats:focus-visible,
.bv-campo input:focus-visible,
.bv-campo select:focus-visible,
.bv-campo textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.bv-btn svg { width: 16px; height: 16px; flex: none; }
.bv-btn--primario { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.bv-btn--primario:hover { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.bv-btn--secundario { background: transparent; color: var(--tinta); border-color: var(--borda-controle); }
.bv-btn--secundario:hover { border-color: var(--tinta); }
.bv-btn--largo { width: 100%; }

.bv-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--destaque);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}
.bv-link:hover { color: var(--destaque-texto); }
.bv-link svg { width: 14px; height: 14px; }

.bv-whats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--raio-circulo);
  background: var(--primario);
  color: var(--sobre-primario);
  box-shadow: var(--sombra-flutuante);
  border: 0;
  cursor: pointer;
}
.bv-whats svg { width: 26px; height: 26px; }
.bv-whats--fixo { position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: 50; }

.bv-selo {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--raio-2);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bv-selo--lancamento { background: var(--selo-lancamento); color: var(--selo-lancamento-texto); }
.bv-selo--obras { background: var(--selo-obras); color: var(--selo-obras-texto); }
.bv-selo--pronta { background: var(--selo-pronta); color: var(--selo-pronta-texto); }

.bv-foto { position: relative; overflow: hidden; background: var(--superficie-alt); }
.bv-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bv-legenda {
  position: absolute;
  left: var(--space-12);
  bottom: var(--space-12);
  padding: var(--space-4) var(--space-8);
  background: rgba(20, 33, 61, 0.78);
  color: var(--branco);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bv-card { display: flex; flex-direction: column; gap: var(--space-16); color: var(--tinta); text-decoration: none; }
.bv-card__midia { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--superficie-alt); }
.bv-card__midia img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.bv-card:hover .bv-card__midia img { transform: scale(1.03); }
.bv-card__midia .bv-selo { position: absolute; top: var(--space-16); left: var(--space-16); }
.bv-card__corpo { display: flex; flex-direction: column; gap: var(--space-12); }
.bv-card__nome { margin: 0; }
.bv-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--tinta-suave);
}
.bv-specs strong { color: var(--tinta); font-weight: 600; }
.bv-card__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.bv-consulta { font-family: var(--font-sans); font-size: 14px; line-height: 22px; color: var(--tinta-suave); }

.bv-sobretitulo {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--destaque-texto);
  margin: 0;
}

.bv-registro { margin: 0; font-family: var(--font-sans); font-size: 12px; line-height: 18px; color: var(--tinta-suave); }

.bv-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.bv-numeros li { display: flex; flex-direction: column; gap: var(--space-4); }
.bv-numeros .numeral { color: var(--tinta); font-size: clamp(32px, 8vw, 52px); line-height: 1.15; white-space: nowrap; }
.bv-numeros .pequeno { color: var(--tinta-suave); }

.bv-painel { background: var(--branco); color: var(--grafite); box-shadow: var(--sombra-flutuante); padding: var(--space-48); }

.bv-form { display: grid; gap: var(--space-24); }
.bv-campo { display: grid; gap: var(--space-4); }
.bv-campo label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.bv-campo input,
.bv-campo select,
.bv-campo textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--space-8) 0;
  border: 0;
  border-bottom: 1px solid var(--borda-controle);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
}
.bv-campo input::placeholder { color: var(--tinta-suave); }

/* ---------- Movimento ---------- */
/* Topo em tela cheia, preso, com a página subindo por cima (cortina). */
.bv-hero { position: sticky; top: 0; z-index: 0; overflow: hidden; background: var(--azul-noite); color: var(--off-white); }
.bv-hero__midia { position: absolute; inset: 0; transform-origin: 50% 35%; }
.bv-hero__midia img, .bv-hero__midia video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bv-hero__veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 33, 61, 0.52) 0%, rgba(20, 33, 61, 0.36) 22%, rgba(20, 33, 61, 0.44) 50%, rgba(20, 33, 61, 0.80) 100%); }
.bv-hero__conteudo { position: relative; z-index: 1; box-sizing: border-box; height: 100%; }
.bv-hero .bv-legenda { z-index: 2; }
.bv-cortina { position: relative; z-index: 1; background: var(--superficie); box-shadow: 0 -16px 40px rgba(20, 33, 61, 0.22); }

/* Seta que convida a rolar */
.bv-seta {
  position: absolute; z-index: 2; left: 50%; bottom: var(--space-32);
  width: 44px; height: 44px; margin-left: -22px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(251, 247, 241, 0.7); border-radius: var(--raio-circulo);
  color: var(--off-white); text-decoration: none;
  animation: bv-pula 1.8s ease-in-out infinite;
}
.bv-seta svg { width: 18px; height: 18px; }
@keyframes bv-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Imagem do topo "respirando" (zoom lento, ida e volta) enquanto não há vídeo */
.bv-hero__midia img { animation: bv-respira 22s ease-in-out infinite alternate; }
@keyframes bv-respira { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Entrada do texto do topo ao abrir a página */
.bv-entra { animation: bv-entra 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bv-entra--2 { animation-delay: 150ms; }
.bv-entra--3 { animation-delay: 300ms; }
.bv-entra--4 { animation-delay: 450ms; }
@keyframes bv-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Efeitos ligados à rolagem (navegadores com scroll-driven animations; nos outros a página fica estática) */
@supports (animation-timeline: view()) {
  .bv-hero__midia { animation: bv-comprime linear both; animation-timeline: scroll(nearest); animation-range: 0 90vh; }
  .bv-revela { animation: bv-revela linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .bv-zoom img { animation: bv-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes bv-comprime { from { transform: scale(1); filter: brightness(1); } to { transform: scale(0.86); filter: brightness(0.5); } }
@keyframes bv-revela { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes bv-zoom { from { transform: scale(1.15); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .bv-seta, .bv-entra, .bv-hero__midia, .bv-hero__midia img, .bv-revela, .bv-zoom img { animation: none !important; }
}

/* ---------- Topo (menu) ---------- */
/* Preso no alto. Transparente sobre a imagem do topo; branco, com linha fina, assim que a página rola. */
.bv-topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  color: var(--off-white); background: transparent; border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.bv-topo--solido { background: var(--branco); color: var(--grafite); border-bottom-color: rgba(31, 35, 41, 0.1); }
.bv-topo__barra {
  max-width: var(--largura-conteudo); margin: 0 auto; box-sizing: border-box;
  padding: var(--space-24); display: flex; align-items: center; justify-content: space-between; gap: var(--space-32);
}
.bv-topo__marca { display: block; line-height: 0; }
.bv-topo__logo { height: 40px; width: auto; }
.bv-topo__logo--escuro { display: none; }
.bv-topo--solido .bv-topo__logo--claro { display: none; }
.bv-topo--solido .bv-topo__logo--escuro { display: block; }
.bv-topo__nav { display: flex; align-items: center; gap: var(--space-32); }
.bv-topo__item, .bv-topo__painel a {
  color: inherit; text-decoration: none;
  font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.bv-topo__item { padding: var(--space-4) 0; border-bottom: 1px solid transparent; transition: border-color 300ms ease; }
.bv-topo__item:hover, .bv-topo__item--ativo { border-bottom-color: currentColor; }
.bv-topo__botao {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
.bv-topo__botao svg { width: 24px; height: 24px; }
.bv-topo__item:focus-visible, .bv-topo__botao:focus-visible, .bv-topo__painel a:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.bv-topo__painel {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32) var(--space-24) var(--space-48);
  background: var(--branco); color: var(--grafite); border-top: 1px solid rgba(31, 35, 41, 0.1);
}
.bv-topo__painel a { font-size: 13px; }
@media (max-width: 860px) {
  .bv-topo__nav { display: none; }
  .bv-topo__botao { display: inline-flex; }
}
@media (min-width: 861px) { .bv-topo__painel { display: none; } }
/* Âncoras não ficam escondidas atrás do menu preso */
section[id], div[id] { scroll-margin-top: 96px; }