/* Home — Fase 3.2 */

/* ===== Estrutura de seção ===== */

.secao {
  padding: 56px 0;
}

.secao--cinza {
  background: var(--cinza-fundo);
}

.secao h2 {
  font-size: 1.75rem;
  margin-top: 6px;
  max-width: 640px;
}

.secao__etapa {
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin: 0;
}

.secao__etapa--sobre-preto {
  color: var(--branco);
  opacity: 0.75;
}

.secao__subtitulo {
  max-width: 560px;
  margin-top: 10px;
  color: var(--cinza-texto);
}

.secao__subtitulo--sobre-preto {
  color: var(--cinza-metal);
}

.secao__vazio {
  margin-top: 20px;
  color: var(--cinza-texto-suave);
}

.secao__acao {
  margin-top: 28px;
  text-align: center;
}

/* ===== Hero ===== */

.hero {
  position: relative;
  background: var(--preto);
  color: var(--branco);
  padding: 56px 0 72px;
  min-height: 100vh;
  min-height: 100svh; /* evita bug da barra do navegador no celular */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== Fundo de vídeo do hero =====
   Os arquivos vêm de public/video/hero. Sem nenhum arquivo lá, o hero
   continua preto como antes. */

.hero--com-video {
  padding: 96px 0 104px;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--preto);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__video--ativo {
  opacity: 1;
}

/* Véu escuro: sem ele o texto branco some em cima de vídeo claro */
.hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .62) 55%, rgba(13, 13, 13, .45) 100%),
    linear-gradient(to top, rgba(13, 13, 13, .7), rgba(13, 13, 13, 0) 45%);
}

.hero--com-video .hero__conteudo {
  position: relative;
  z-index: 1;
}

.hero__conteudo {
  max-width: 960px;
}

.hero__titulo {
  color: var(--branco);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  margin-top: 10px;
  line-height: 1.15;
}

.hero__subtitulo {
  color: var(--cinza-metal);
  font-size: 1.05rem;
  margin-top: 14px;
  max-width: 560px;
}

.hero__resposta {
  color: var(--cinza-metal);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 10px;
  max-width: 560px;
}

.hero__credibilidade {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--cinza-metal);
}

/* ===== Busca do hero =====
   Uma barra só, em cápsula, com os campos separados por filete em vez de
   caixinha cada um. As abas ficam fora da barra, apoiadas no vídeo. */

.busca {
  position: relative;
  /* A entrada em cascata deixa `filter` aplicado, e filtro cria contexto de
     empilhamento: sem um z-index aqui, a lista do dropdown ficava presa dentro
     do bloco da busca e a faixa de credibilidade passava por cima dela. */
  z-index: 3;
  margin-top: 28px;
  max-width: 900px;
}

.busca__abas {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.busca__aba {
  padding: 9px 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--branco);
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

@media (hover: hover) {
  .busca__aba:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.busca__aba--ativa,
.busca__aba--ativa:hover {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--preto);
}

.busca__barra {
  display: grid;
  grid-template-columns: 1fr 1fr 1.45fr auto;
  align-items: center;
  background: var(--branco);
  border-radius: 999px;
  padding: 8px 8px 8px 4px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.busca__campo {
  position: relative;
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 10px 30px 10px 22px;
  border-left: 1px solid var(--cinza-fundo);
}

/* A aba Alugar esconde o campo de preço de venda pelo atributo `hidden`. Sem
   esta linha o `display: grid` acima vence a regra do navegador e os dois
   campos de preço aparecem juntos. */
.busca__campo[hidden] {
  display: none;
}

.busca__campo:first-of-type {
  border-left: 0;
}

/* Setinha própria: o select perde a do sistema com appearance: none */
.busca__campo::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cinza-texto-suave);
  border-bottom: 2px solid var(--cinza-texto-suave);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Com o dropdown montado quem desenha a seta é o botão, que vai até a borda
   do campo: assim o clique na seta abre a lista, e não só o clique no nome. */
.busca__campo.tem-dropdown {
  padding-right: 14px;
}

.busca__campo.tem-dropdown::after {
  display: none;
}

/* O botão avança por cima do respiro lateral do campo, senão sobra uma faixa
   morta de poucos pixels ao lado da seta, onde o clique não abre nada. */
.busca__campo.tem-dropdown .dropdown {
  margin: 0 -14px 0 -22px;
}

.busca__campo.tem-dropdown .dropdown__gatilho {
  padding: 4px 14px 6px 22px;
  margin-bottom: -6px;
}

.busca__rotulo {
  font-family: var(--font-texto);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-texto-suave);
}

.busca__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-texto);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--preto);
  text-overflow: ellipsis;
  cursor: pointer;
}

.busca__select:focus {
  outline: none;
}

.busca__select:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 6px;
  border-radius: 2px;
}

.busca__enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 58px;
  padding: 0 28px;
  margin-left: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--vinho);
  color: var(--branco);
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  /* A largura fica travada no tamanho natural: se o botão encolhesse ao sumir
     o texto, ele fugiria de debaixo do cursor e o hover ficaria piscando. */
  min-width: 8.5rem;
  transition:
    background-color var(--transicao),
    transform var(--transicao),
    box-shadow var(--transicao),
    gap 0.6s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.busca__enviar svg {
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.busca__enviar span {
  display: inline-block;
  max-width: 6em;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 0.6s cubic-bezier(0.45, 0.05, 0.25, 1),
    opacity 0.35s ease;
}

@media (hover: hover) {
  /* Além do fundo mais escuro, a lupa dá uma volta enquanto o texto encolhe
     até sumir, e ela fica sozinha no meio do botão, do mesmo tamanho. */
  .busca__enviar:hover {
    background: #7a0000;
    transform: translateY(-2px) scale(0.93);
    box-shadow: 0 10px 22px rgba(153, 0, 0, 0.4);
    gap: 0;
  }

  .busca__enviar:hover svg {
    transform: rotate(360deg);
  }

  .busca__enviar:hover span {
    max-width: 0;
    opacity: 0;
  }
}

.busca__enviar:active {
  transform: translateY(0) scale(0.9);
}

/* ===== Atalho por código ===== */

.busca__codigo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-left: 4px;
}

.busca__codigo-label {
  font-family: var(--font-texto);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.busca__codigo-input {
  width: 92px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--font-texto);
  font-size: 0.85rem;
  color: var(--branco);
  transition: border-color var(--transicao), background-color var(--transicao);
}

/* 0.5 dava 3,5:1 sobre o campo; 0.7 passa o mínimo de 4,5:1 */
.busca__codigo-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.busca__codigo-input:focus {
  outline: none;
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.18);
}

.busca__codigo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--branco);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

/* A seta já ocupa o lugar dela parada, só invisível: assim o botão não muda
   de largura no hover e não escapa de debaixo do cursor. */
.busca__codigo-btn svg {
  flex: none;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .busca__codigo-btn:hover,
  .busca__codigo-btn:focus-visible {
    background: var(--branco);
    border-color: var(--branco);
    color: var(--preto);
  }

  .busca__codigo-btn:hover svg,
  .busca__codigo-btn:focus-visible svg {
    opacity: 1;
    transform: translateX(2px);
  }
}

.busca__codigo-btn:active svg {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .busca__codigo-btn svg {
    transition-duration: 0.01s;
    transform: none;
  }
}

/* No celular a cápsula vira um cartão: três campos em cápsula não cabem */
@media (max-width: 760px) {
  .busca__barra {
    grid-template-columns: 1fr;
    border-radius: 26px;
    padding: 8px;
  }

  .busca__campo {
    border-left: 0;
    border-top: 1px solid var(--cinza-fundo);
    padding: 10px 30px 10px 18px;
  }

  .busca__campo:first-of-type {
    border-top: 0;
  }

  .busca__enviar {
    width: 100%;
    margin: 8px 0 0;
  }
}

/* ===== Filtros rápidos e abas "Encontre do seu jeito" ===== */

/* As duas fileiras são a mesma pílula, então dividem as regras: assim não têm
   como descolar uma da outra. O texto (tamanho, peso e espaçamento) está no
   tipografia.css, que carrega depois deste arquivo. */

.filtros-rapidos,
.abas-encontre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.filtro-rapido,
.abas-encontre__botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--cinza-metal);
  border-radius: var(--raio-botao);
  background: var(--branco);
  color: var(--cinza-texto);
  cursor: pointer;
  transition:
    background-color var(--transicao),
    color var(--transicao),
    border-color var(--transicao),
    transform var(--transicao),
    box-shadow var(--transicao);
}

.filtro-rapido--ativo,
.abas-encontre__botao--ativo {
  background: var(--preto);
  border-color: var(--preto);
  color: var(--branco);
  box-shadow: none;
}

/* Parado, o botão é quase invisível: no hover ele escurece a borda e o texto,
   sobe um pouco e ganha um filete vermelho embaixo, para dizer onde o cursor
   está sem competir com o que já está ligado. */
@media (hover: hover) {
  .filtro-rapido:not(.filtro-rapido--ativo):hover,
  .abas-encontre__botao:not(.abas-encontre__botao--ativo):hover {
    background: var(--branco);
    border-color: var(--preto);
    color: var(--preto);
    transform: translateY(-2px);
    box-shadow: 0 3px 0 var(--vermelho);
  }

  .filtro-rapido--ativo:hover,
  .abas-encontre__botao--ativo:hover {
    background: #262626;
    transform: translateY(-2px);
    box-shadow: 0 3px 0 var(--vermelho);
  }
}

.filtro-rapido:active,
.abas-encontre__botao:active {
  transform: translateY(0);
  box-shadow: none;
}

.filtro-rapido:focus-visible,
.abas-encontre__botao:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .filtro-rapido,
  .abas-encontre__botao {
    transition: none;
  }

  .filtro-rapido:hover,
  .abas-encontre__botao:hover {
    transform: none;
  }
}

/* ===== Encontre do seu jeito ===== */

.grade-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* O card tem uma barra vermelha na esquerda, que cresce, e uma seta no canto
   direito, que acende. Os 62px de padding à direita são o buraco onde a seta
   mora: são os 32px dela, os 18px da margem, os 6px que ela recua parada e
   mais 6px de folga, senão um nome comprido encosta no círculo. */
.card-atalho {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 62px 20px 22px;
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  background: var(--branco);
  box-shadow: var(--sombra-card);
  /* visible por causa da moldura do hover, que fica 1px para fora do card
     para cobrir a borda dele sem deixar fresta */
  overflow: visible;
  text-decoration: none;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s ease;
}

/* Moldura do hover: em repouso o clip-path esconde ela inteira, e no hover ela
   se abre do canto de cima à esquerda até contornar os quatro lados. */
.card-atalho::before {
  content: "";
  position: absolute;
  inset: -1px;                       /* cobre também a borda de 1px do card */
  border: 5px solid var(--vermelho);
  border-radius: 6px;                /* mesmo raio do card, sem fresta nos cantos */
  pointer-events: none;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.card-atalho__seta {
  position: absolute;
  right: 18px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cinza-fundo);
  color: var(--preto);
  transform: translate(-6px, -50%);
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* O foco repete o que o hover faz, senão quem navega de teclado só vê o
   contorno e perde a resposta do card. */
.card-atalho:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
}

.card-atalho:focus-visible .card-atalho__seta {
  background: var(--vermelho);
  color: var(--branco);
  transform: translate(0, -50%);
}

.card-atalho:hover::before,
.card-atalho:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

@media (hover: hover) {
  .card-atalho:hover {
    transform: translateY(-4px);
    border-color: var(--vermelho);
    box-shadow: 0 14px 30px rgba(214, 40, 40, .16);
  }

  .card-atalho:hover .card-atalho__seta {
    background: var(--vermelho);
    color: var(--branco);
    transform: translate(0, -50%);
  }
}

/* Selo com a contagem: o texto e a cor estão no tipografia.css, que carrega
   depois deste arquivo. */
.card-atalho__contagem {
  align-self: flex-start;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--vermelho-lavado);
}

@media (prefers-reduced-motion: reduce) {
  .card-atalho,
  .card-atalho::before,
  .card-atalho__seta {
    transition: none;
  }

  .card-atalho:hover {
    transform: none;
  }
}

/* Variações de hover para teste. Troque o data-hover da seção no home.ejs:
   "preenchimento", "preto" ou "sutil". Sem o atributo vale o hover acima. */
[data-hover] .card-atalho {
  isolation: isolate;
}

[data-hover="preenchimento"] .card-atalho::before,
[data-hover="preto"] .card-atalho::before {
  z-index: -1;
  border: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-hover="preenchimento"] .card-atalho::before { background: var(--vermelho); }
[data-hover="preto"] .card-atalho::before { background: var(--preto); }

[data-hover="preenchimento"] .card-atalho:hover::before,
[data-hover="preenchimento"] .card-atalho:focus-visible::before,
[data-hover="preto"] .card-atalho:hover::before,
[data-hover="preto"] .card-atalho:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

[data-hover="preto"] .card-atalho::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--vermelho);
  transform: scaleY(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

[data-hover="preto"] .card-atalho:hover::after,
[data-hover="preto"] .card-atalho:focus-visible::after {
  transform: scaleY(1);
}

[data-hover="preenchimento"] .card-atalho__titulo,
[data-hover="preenchimento"] .card-atalho__cidade,
[data-hover="preto"] .card-atalho__titulo,
[data-hover="preto"] .card-atalho__cidade {
  transition: color 0.4s ease;
}

[data-hover="preenchimento"] .card-atalho:hover .card-atalho__titulo,
[data-hover="preto"] .card-atalho:hover .card-atalho__titulo {
  color: var(--branco);
}

[data-hover="preenchimento"] .card-atalho:hover .card-atalho__cidade,
[data-hover="preto"] .card-atalho:hover .card-atalho__cidade {
  color: rgba(255, 255, 255, .8);
}

[data-hover="preenchimento"] .card-atalho:hover {
  border-color: var(--vermelho);
  box-shadow: 0 14px 30px rgba(214, 40, 40, .28);
}

[data-hover="preenchimento"] .card-atalho:hover .card-atalho__seta {
  background: var(--branco);
  color: var(--vermelho);
}

[data-hover="preto"] .card-atalho:hover {
  border-color: var(--preto);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

/* sutil: sem moldura, só a borda vermelha, a subida leve e a seta */
[data-hover="sutil"] .card-atalho:hover::before,
[data-hover="sutil"] .card-atalho:focus-visible::before {
  clip-path: inset(0 100% 100% 0);
}

[data-hover="sutil"] .card-atalho:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .1);
}

/* ===== Correspondente bancário ===== */

/* Brilho branco suave vindo do alto, sobre quase-preto. Substitui o degradê da
   .bg-escuro-grao (components.css), que continua dando o granulado por cima. */
.secao--financiamento {
  background: radial-gradient(
    ellipse 90% 70% at 50% 0%,
    rgba(255, 255, 255, 0.18),
    transparent 65%
  ), #0a0a0a;
  color: var(--branco);
}

.secao--financiamento__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 40px;
  align-items: center;
}

.secao--financiamento__titulo {
  color: var(--branco);
}

.sequencia-financiamento {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: passo;
}

.sequencia-financiamento li {
  position: relative;
  padding: 14px 18px 14px 44px;
  border: 1px solid var(--preto-suave);
  border-radius: 0;
  font-weight: 600;
}

.sequencia-financiamento li::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vermelho);
  font-family: var(--font-titulo);
  font-weight: 800;
}

@media (max-width: 900px) {
  .secao--financiamento__grade {
    grid-template-columns: 1fr;
  }
}

/* ===== Anuncie ===== */

.secao--anuncie__caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px;
  border-radius: 0;
  background: var(--cinza-fundo);
}

/* O prédio só entra quando há largura para as três colunas (texto, desenho e
   botão). Abaixo disso a caixa volta a ser a fileira de antes e o desenho sai:
   empilhado, ele empurraria o botão para longe do texto. */
.secao--anuncie__caixa .predio {
  display: none;
}

@media (min-width: 821px) {
  .secao--anuncie__caixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px auto;
    align-items: center;
    gap: 24px;
  }

  .secao--anuncie__caixa .predio {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}

.predio svg {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  overflow: visible;
}

/* Os tons de dentro do desenho (cinza do prédio de trás, verde do arbusto,
   amarelo da janela acesa) ficam locais de propósito: são cor de ilustração,
   não do sistema de cores do site. */
.predio__halo { fill: var(--branco); opacity: .9; }
.predio__lateral { fill: #3a3a3a; }
.predio__janela-lateral { fill: rgba(255, 255, 255, .25); }
.predio__corpo { fill: var(--preto); }
.predio__cornija { fill: var(--vermelho); }
.predio__mastro { stroke: var(--preto); stroke-width: 2; stroke-linecap: round; }
.predio__bandeira { fill: var(--vermelho); }
.predio__janela { fill: rgba(255, 255, 255, .18); }
.predio__placa { fill: var(--branco); }
.predio__toldo { fill: var(--branco); opacity: .92; }
.predio__porta { fill: var(--vermelho); }
.predio__macaneta { fill: var(--branco); }
.predio__poste { fill: var(--cinza-texto); }
.predio__placa-venda { fill: var(--vermelho); }
.predio__placa-aluga { fill: var(--preto); }
.predio__chao { fill: var(--preto); }
.predio__arbusto { fill: #2f4f43; }

.predio__placa-texto {
  fill: var(--vermelho);
  font-family: var(--font-titulo);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
}

.predio__placa-legenda {
  fill: var(--branco);
  font-family: var(--font-titulo);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .4px;
}

/* A bandeira balança pelo mastro, então a origem é a borda esquerda dela;
   transform-box: fill-box faz a porcentagem valer sobre o próprio desenho, e
   não sobre o SVG inteiro. */
.predio__bandeira {
  transform-box: fill-box;
  transform-origin: left center;
  animation: predio-bandeira 1.8s ease-in-out infinite alternate;
}

.predio__janela--acesa { animation: predio-acender 5s ease-in-out infinite; }
.predio__janela--d1 { animation-delay: 0s; }
.predio__janela--d2 { animation-delay: 1.6s; }
.predio__janela--d3 { animation-delay: 3.2s; }

.predio__placas {
  transform-origin: 27px 116px;
  animation: predio-balanco 3.6s ease-in-out infinite alternate;
}

@keyframes predio-acender {
  0%, 30%, 100% { fill: rgba(255, 255, 255, .18); }
  45%, 75% { fill: #ffe9a8; }
}

@keyframes predio-bandeira {
  from { transform: scaleX(1); }
  to { transform: scaleX(.78) skewY(-6deg); }
}

@keyframes predio-balanco {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .predio__bandeira,
  .predio__janela--acesa,
  .predio__placas {
    animation: none;
  }

  /* Sem a animação, a janela fica acesa de vez: o desenho perde o piscar, não a luz. */
  .predio__janela--acesa {
    fill: #ffe9a8;
  }
}

/* ===== CTA final ===== */

/* O fundo vem da classe .bg-cta-vermelho. O conteúdo tem largura limitada e
   fica centralizado, então nunca encosta no vermelho do canto. */
.secao--cta-final {
  color: var(--preto);
  text-align: center;
}

/* O .reveal desta seção fica só com o efeito dos textos de dentro: o fundo é um
   ::before, e animar opacidade/filtro no elemento levava o degradê junto. */
.secao--cta-final.reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.secao--cta-final__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.secao--cta-final__telefones {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  color: var(--cinza-metal);
  font-size: 0.9rem;
}

.secao--cta-final__slogan {
  margin-top: 24px;
  font-family: var(--font-titulo);
  font-weight: 700;
  /* Nem --cinza-metal (só passa sobre preto) nem --cinza-texto-suave: no celular o
     slogan cai na borda esmaecida do degradê e aquele tom dava 3,34:1 */
  color: var(--cinza-texto);
}

/* ===== 02 Carrossel de novidades ===== */

.secao--carrossel {
  padding-bottom: 40px;
}

.carrossel {
  position: relative;
  margin-top: 22px;
}

.carrossel__trilho {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0 20px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carrossel__trilho::-webkit-scrollbar {
  display: none;
}

.carrossel__slide {
  flex: 0 0 88%;
  scroll-snap-align: center;
}

.carrossel__midia {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--preto);
  color: var(--branco);
  text-decoration: none;
  box-shadow: var(--sombra-card);
}

.carrossel__imagem,
.carrossel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Véu só na parte de baixo, onde o texto senta */
.carrossel__texto {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 56px 22px 20px;
  background: linear-gradient(to top, rgba(13, 13, 13, .88) 20%, rgba(13, 13, 13, 0));
}

.carrossel__titulo {
  font-family: var(--font-titulo);
  font-size: 1.25rem;
  line-height: 1.2;
}

.carrossel__apoio {
  font-size: 0.92rem;
  color: #e6e6e6;
}

.carrossel__cta {
  margin-top: 8px;
  align-self: flex-start;
  padding: 7px 16px;
  border-radius: var(--raio-botao);
  background: var(--vermelho);
  font-weight: 600;
  font-size: 0.85rem;
}

a.carrossel__midia:hover .carrossel__cta,
a.carrossel__midia:focus-visible .carrossel__cta {
  background: var(--vermelho-escuro);
}

.carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.carrossel__seta {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cinza-metal);
  border-radius: 50%;
  background: var(--branco);
  color: var(--preto);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.carrossel__seta:hover,
.carrossel__seta:focus-visible {
  background: var(--preto);
  color: var(--branco);
}

.carrossel__pontos {
  display: flex;
  gap: 8px;
}

.carrossel__ponto {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--cinza-metal);
  overflow: hidden;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background var(--transicao);
}

@media (hover: hover) {
  .carrossel__ponto:not(.carrossel__ponto--ativo):hover {
    background: var(--cinza-texto-suave);
  }
}

.carrossel__ponto--ativo {
  width: 34px;
  border-radius: 6px;
  background: rgba(214, 40, 40, 0.25);
}

/* Barrinha que enche enquanto o slide está no ar: mostra quanto falta para a
   troca. Só anda quando o carrossel está mesmo andando sozinho. */
.carrossel__ponto--ativo::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(1);
  background: var(--vermelho);
  border-radius: 6px;
}

.carrossel--andando .carrossel__ponto--ativo::after {
  animation: carrossel-progresso 7s linear forwards;
}

@keyframes carrossel-progresso {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (min-width: 768px) {
  .carrossel__slide {
    flex-basis: 62%;
  }

  .carrossel__titulo {
    font-size: 1.6rem;
  }

  .carrossel__texto {
    padding: 72px 30px 26px;
  }
}

@media (min-width: 1024px) {
  .carrossel__trilho {
    padding-inline: max(20px, calc((100vw - var(--container)) / 2 + 20px));
  }

  .carrossel__slide {
    flex-basis: min(1100px, 76%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho {
    scroll-behavior: auto;
  }
}

.carrossel__pausa {
  margin-left: 4px;
  padding: 7px 14px;
  border: 1px solid var(--cinza-metal);
  border-radius: var(--raio-botao);
  background: var(--branco);
  font-family: var(--font-texto);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.carrossel__pausa:hover,
.carrossel__pausa:focus-visible {
  background: var(--preto);
  color: var(--branco);
}


/* O CTA final ficou claro: os telefones precisam de cor escura */
/* Mesmo motivo do slogan: em tela estreita os telefones chegam perto do degradê */
.secao--cta-final .secao--cta-final__telefones {
  color: var(--cinza-texto);
}

/* ===== Dica de rolagem do hero ===== */

/* Some no primeiro scroll e não volta: dica que insiste depois de obedecida vira
   enfeite. Fica escondida em tela baixa, onde ela cobriria a busca. */
.hero__rolar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--branco);
  opacity: 0.75;
  transition: opacity var(--transicao), transform var(--transicao);
}

.hero__rolar--fora {
  opacity: 0;
  transform: translate(-50%, 10px);
}

.hero__rolar-texto {
  font-family: var(--font-texto);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* A seta é um quadrado girado: duas bordas bastam para desenhar o "v" */
.hero__rolar-seta {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: hero-rolar 1.8s ease-in-out infinite;
}

@keyframes hero-rolar {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(3px, 3px); }
}

@media (min-width: 1024px) and (min-height: 700px) {
  .hero__rolar {
    display: flex;
  }
}