/* ==========================================================================
   VR Solar — folha de estilos compartilhada
   Usada por todas as páginas do site (home, residencial, comercial,
   industrial, rural, blog). Alterar cores, espaçamentos e tamanhos
   apenas nas variáveis abaixo — o restante do arquivo não deve
   precisar de ajuste ao trocar a paleta.
   ========================================================================== */

:root {
  /* Paleta */
  --azul-escuro: #0B1F3A; /* base, header, footer */
  --azul: #14406E;        /* seções, títulos */
  --dourado: #C9922E;     /* destaque e CTA — ponte com o amarelo da logo */
  --verde: #2E7D5B;       /* sustentabilidade */
  --cinza: #5A6472;       /* texto secundário */
  --claro: #F2F4F7;       /* fundos alternados */
  --branco: #FFFFFF;

  /* Tipografia */
  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tamanho-h1: clamp(2rem, 4vw, 3rem);
  --tamanho-h2: clamp(1.5rem, 3vw, 2.25rem);
  --tamanho-h3: 1.25rem;
  --tamanho-texto: 1rem;
  --tamanho-pequeno: 0.875rem;

  /* Espaçamentos */
  --espaco-xs: 0.5rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2.5rem;
  --espaco-xl: 4rem;

  /* Estrutura */
  --largura-maxima: 1180px;
  --raio-borda: 10px;
  --altura-header: 72px;
  --altura-barra-ancoras: 48px;
  --sombra-suave: 0 4px 16px rgba(11, 31, 58, 0.12);
  --alvo-toque: 44px;
}

/* ---------- Reset básico ---------- */
* ,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + var(--altura-barra-ancoras) + 12px);
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--tamanho-texto);
  color: var(--azul-escuro);
  background-color: var(--branco);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--espaco-sm);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: var(--tamanho-h1); }
h2 { font-size: var(--tamanho-h2); }
h3 { font-size: var(--tamanho-h3); }

p {
  margin: 0 0 var(--espaco-sm);
  color: var(--cinza);
}

/* ---------- Foco de teclado ---------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 2px;
}

/* ---------- Redução de movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Tópicos que aparecem ao rolar a página ----------
   O JavaScript marca os elementos com .vr-revelar--pronto assim que a
   página carrega; sem JavaScript, o conteúdo permanece visível normalmente. */
.vr-revelar.vr-revelar--pronto {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.vr-revelar.vr-revelar--pronto.vr-revelado {
  opacity: 1;
  transform: translateY(0);
}

.vr-revelar--pronto:nth-child(2) { transition-delay: 0.08s; }
.vr-revelar--pronto:nth-child(3) { transition-delay: 0.16s; }
.vr-revelar--pronto:nth-child(4) { transition-delay: 0.24s; }
.vr-revelar--pronto:nth-child(5) { transition-delay: 0.32s; }

/* ---------- Contêiner genérico ---------- */
.vr-container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 var(--espaco-sm);
}

@media (min-width: 480px) {
  .vr-container {
    padding: 0 var(--espaco-md);
  }
}

/* ---------- Botões ---------- */
.vr-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--alvo-toque);
  padding: 0.85rem 1.75rem;
  border-radius: var(--raio-borda);
  font-weight: 700;
  font-size: var(--tamanho-texto);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}

.vr-botao:hover {
  transform: translateY(-2px);
}

.vr-botao--primario {
  background-color: var(--dourado);
  color: var(--azul-escuro);
}

.vr-botao--primario:hover {
  box-shadow: var(--sombra-suave);
}

.vr-botao--secundario {
  background-color: transparent;
  border-color: var(--branco);
  color: var(--branco);
}

.vr-botao--secundario:hover {
  background-color: var(--branco);
  color: var(--azul-escuro);
}

/* Agrupa múltiplos CTAs de contato lado a lado, centralizados */
.vr-grupo-contato {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-md);
}

.vr-link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--espaco-md);
  color: var(--azul);
  font-weight: 600;
  transition: color 0.15s ease;
}

.vr-link-voltar:hover {
  color: var(--dourado);
}

/* ---------- Cabeçalho fixo ---------- */
.vr-cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--altura-header);
  background-color: var(--azul-escuro);
  box-shadow: var(--sombra-suave);
}

.vr-cabecalho .vr-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
}

.vr-cabecalho__marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-md);
  flex-shrink: 0;
}

.vr-cabecalho__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--branco);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.vr-cabecalho__logo img {
  height: 36px;
  width: auto;
}

.vr-navegacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
}

.vr-navegacao__lista {
  display: flex;
  gap: var(--espaco-md);
}

.vr-navegacao__lista a {
  display: inline-flex;
  align-items: center;
  color: var(--branco);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.vr-navegacao__lista a:hover,
.vr-navegacao__lista a[aria-current="page"] {
  border-bottom-color: var(--dourado);
  color: var(--dourado);
}

.vr-menu-mobile-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  background: none;
  border: none;
  color: var(--branco);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}

.vr-cabecalho__telefone {
  display: none;
  color: var(--dourado);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.vr-cabecalho__telefone:hover {
  color: var(--branco);
}

/* ---------- Barra de âncoras ---------- */
.vr-barra-ancoras {
  position: sticky;
  top: var(--altura-header);
  z-index: 90;
  height: var(--altura-barra-ancoras);
  background-color: var(--azul);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vr-barra-ancoras__lista {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--espaco-md);
  white-space: nowrap;
}

.vr-barra-ancoras__lista a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--tamanho-pequeno);
  font-weight: 600;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.vr-barra-ancoras__lista a:hover {
  color: var(--branco);
}

.vr-barra-ancoras__lista a.vr-ativo {
  color: var(--branco);
  border-bottom-color: var(--dourado);
}

/* ---------- Seções genéricas ---------- */
section {
  padding: var(--espaco-lg) 0;
}

@media (min-width: 768px) {
  section {
    padding: var(--espaco-xl) 0;
  }
}

.vr-secao-alternada {
  background-color: var(--claro);
}

.vr-secao-cabecalho {
  max-width: 720px;
  margin: 0 0 var(--espaco-lg);
}

.vr-secao-cabecalho--centro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Marca d'água atrás do título ---------- */
.vr-secao-cabecalho--marca {
  position: relative;
  padding-top: var(--espaco-sm);
}

.vr-secao-cabecalho__marca-agua {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 85vw);
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.vr-secao-cabecalho--marca h1,
.vr-secao-cabecalho--marca > p,
.vr-secao-cabecalho--marca .vr-blog-busca {
  position: relative;
  z-index: 1;
}

/* ---------- Barra de busca do blog ---------- */
.vr-blog-busca {
  position: relative;
  max-width: 480px;
  margin: var(--espaco-md) auto 0;
}

.vr-blog-busca__icone {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cinza);
  pointer-events: none;
}

.vr-blog-busca__campo {
  width: 100%;
  font: inherit;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border: 1px solid rgba(11, 31, 58, 0.18);
  border-radius: 999px;
  background-color: var(--branco);
  color: var(--azul-escuro);
  min-height: var(--alvo-toque);
  box-shadow: var(--sombra-suave);
  -webkit-appearance: none;
  appearance: none;
}

.vr-blog-busca__campo::placeholder {
  color: var(--cinza);
}

.vr-blog-busca__campo:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.25);
}

.vr-blog-busca__campo::-webkit-search-cancel-button {
  cursor: pointer;
}

/* ---------- Grade de cartões ---------- */
.vr-grade-cartoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-md);
}

@media (min-width: 480px) {
  .vr-grade-cartoes {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.vr-cartao {
  background-color: var(--branco);
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}

.vr-cartao[hidden] {
  display: none;
}

.vr-cartao:hover {
  transform: translateY(-4px);
}

.vr-cartao__imagem {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vr-cartao__conteudo {
  padding: var(--espaco-md);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  flex-grow: 1;
}

.vr-cartao__conteudo h3 {
  color: var(--azul);
}

.vr-cartao__link {
  margin-top: auto;
  font-weight: 700;
  color: var(--dourado);
}

a.vr-cartao {
  text-decoration: none;
  color: inherit;
}

.vr-cartao--informativo:hover {
  transform: none;
}

/* ---------- Blog: listagem ---------- */
.vr-cartao__data {
  font-size: var(--tamanho-pequeno);
  color: var(--cinza);
  font-weight: 600;
}

/* ---------- Blog: artigo ---------- */
.vr-artigo {
  max-width: 760px;
  margin: 0 auto;
}

.vr-artigo__capa {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
  margin-bottom: var(--espaco-lg);
}

.vr-artigo__meta {
  color: var(--cinza);
  font-size: var(--tamanho-pequeno);
  font-weight: 600;
  margin-bottom: var(--espaco-xs);
}

.vr-artigo__corpo h2 {
  margin-top: var(--espaco-lg);
  color: var(--azul);
}

.vr-artigo__corpo p {
  margin: 0 0 var(--espaco-sm);
}

.vr-artigo__corpo ul {
  margin: 0 0 var(--espaco-md);
  padding-left: 1.25rem;
}

.vr-artigo__corpo li {
  list-style: disc;
  margin-bottom: 0.4rem;
}

.vr-artigo__cta {
  margin-top: var(--espaco-lg);
  padding: var(--espaco-lg);
  background-color: var(--claro);
  border-radius: var(--raio-borda);
  text-align: center;
}

.vr-artigo__cta p {
  margin: 0 0 var(--espaco-sm);
  font-weight: 700;
  color: var(--azul-escuro);
}

/* Tabelas dentro de artigos: rolagem própria em telas estreitas, sem
   empurrar o restante da página para o lado. */
.vr-tabela-scroll {
  overflow-x: auto;
  margin: 0 0 var(--espaco-md);
}

.vr-artigo__corpo table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.vr-artigo__corpo th,
.vr-artigo__corpo td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(11, 31, 58, 0.12);
}

.vr-artigo__corpo th {
  background-color: var(--claro);
  color: var(--azul-escuro);
  font-weight: 700;
}

.vr-artigo__corpo td {
  color: var(--cinza);
}

/* ---------- Hero com imagem de fundo ---------- */
/* Cada página define --vr-hero-imagem (ver regras .vr-pagina-*); a home é o valor padrão. */
.vr-hero {
  --vr-hero-imagem: url("../img/home-hero.jpg");
  position: relative;
  overflow: hidden;
  background-color: var(--claro);
  padding: var(--espaco-xl) 0;
}

@media (min-width: 768px) {
  .vr-hero {
    padding: calc(var(--espaco-xl) * 1.6) 0;
  }
}

/* Camada da foto: entra com fade + leve zoom assim que a página carrega */
.vr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--vr-hero-imagem);
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: vrHeroSurgir 2s ease-out 0.2s forwards;
}

/* Camada da transparência: fica por cima da foto para manter o texto legível */
.vr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.6) 68%, rgba(255, 255, 255, 0.28) 100%);
}

@media (max-width: 767px) {
  .vr-hero::after {
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
  }
}

@keyframes vrHeroSurgir {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.vr-hero .vr-container {
  position: relative;
  z-index: 1;
}

.vr-hero__conteudo {
  max-width: 620px;
}

.vr-hero h1,
.vr-hero p {
  color: var(--azul-escuro);
}

/* Logo maior sobre a foto do banner, no canto onde a imagem fica mais
   visível — some em telas estreitas para não disputar espaço com o texto. */
.vr-hero__logo {
  display: none;
}

@media (min-width: 768px) {
  .vr-hero__logo {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 84px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(11, 31, 58, 0.35));
  }
}

/* ---------- Carrossel de imagens (crossfade automático, sem JS) ----------
   As duas imagens alternam com keyframes complementares: quando uma some (opacity 0),
   a outra aparece (opacity 1), então não precisam de JavaScript nem de animation-delay
   para se manterem sincronizadas. */
.vr-carrossel__legenda {
  margin: 0 0 var(--espaco-sm);
  font-size: var(--tamanho-h3);
  font-weight: 700;
  color: var(--azul);
  text-align: center;
}

.vr-carrossel {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-borda);
  aspect-ratio: 4 / 3;
  box-shadow: var(--sombra-suave);
}

.vr-carrossel__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-carrossel__imagem--acesas {
  animation: vrCarrosselAcesas 3.75s ease-in-out infinite;
}

.vr-carrossel__imagem--apagadas {
  animation: vrCarrosselApagadas 3.75s ease-in-out infinite;
}

@keyframes vrCarrosselAcesas {
  0%, 40% { opacity: 1; }
  60%, 80% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes vrCarrosselApagadas {
  0%, 40% { opacity: 0; }
  60%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Carrossel de 4 imagens (crossfade automático, sem JS) ----------
   Mesma lógica do carrossel de 2 imagens acima: cada imagem tem sua própria
   animação, com a janela visível de uma terminando exatamente onde a
   seguinte começa, então elas se revezam em sequência sem JavaScript. */
.vr-carrossel--quatro .vr-carrossel__imagem--dentista-normal {
  animation: vrCarrosselDentistaNormal 7.5s ease-in-out infinite;
}

.vr-carrossel--quatro .vr-carrossel__imagem--dentista-apagao {
  animation: vrCarrosselDentistaApagao 7.5s ease-in-out infinite;
}

.vr-carrossel--quatro .vr-carrossel__imagem--mercado-normal {
  animation: vrCarrosselMercadoNormal 7.5s ease-in-out infinite;
}

.vr-carrossel--quatro .vr-carrossel__imagem--mercado-apagao {
  animation: vrCarrosselMercadoApagao 7.5s ease-in-out infinite;
}

@keyframes vrCarrosselDentistaNormal {
  0%, 20% { opacity: 1; }
  30%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes vrCarrosselDentistaApagao {
  0%, 20% { opacity: 0; }
  30%, 40% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes vrCarrosselMercadoNormal {
  0%, 40% { opacity: 0; }
  50%, 70% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes vrCarrosselMercadoApagao {
  0%, 70% { opacity: 0; }
  80%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Seção dividida em duas colunas ---------- */
.vr-secao-dividida .vr-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-lg);
}

.vr-secao-dividida__coluna {
  flex: 1 1 380px;
}

/* ---------- Rodapé ---------- */
.vr-rodape {
  background-color: var(--azul-escuro);
  color: var(--branco);
  padding: var(--espaco-lg) 0;
}

.vr-rodape .vr-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-lg);
}

@media (min-width: 768px) {
  .vr-rodape .vr-container {
    flex-direction: row;
  }
}

.vr-rodape__contato p,
.vr-rodape__contato a {
  color: rgba(255, 255, 255, 0.85);
}

.vr-rodape__linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vr-rodape__icone {
  flex-shrink: 0;
  color: var(--dourado);
}

.vr-rodape__navegacao ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-sm) var(--espaco-md);
}

.vr-rodape__navegacao a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--tamanho-pequeno);
}

.vr-rodape__navegacao a:hover {
  color: var(--dourado);
}

/* ---------- Responsivo: menu mobile (abaixo de 1024px) ---------- */
@media (max-width: 1023px) {
  .vr-navegacao__lista {
    position: fixed;
    top: var(--altura-header);
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--azul-escuro);
    padding: var(--espaco-md);
    gap: var(--espaco-xs);
    max-height: calc(100vh - var(--altura-header));
    overflow-y: auto;
    transform: translateY(-150%);
    transition: transform 0.2s ease;
  }

  .vr-navegacao__lista.vr-aberto {
    transform: translateY(0);
  }

  .vr-navegacao__lista a {
    width: 100%;
    min-height: var(--alvo-toque);
    padding: 0.75rem 0;
  }

  .vr-menu-mobile-botao {
    display: flex;
  }
}

/* Telas muito estreitas: cabeçalho fica apertado (logo + botão + menu),
   então reduz o botão e esconde o nome ao lado da logo para evitar que o
   menu hambúrguer seja empurrado para fora da tela. */
@media (max-width: 480px) {
  .vr-cabecalho__logo-texto {
    display: none;
  }

  .vr-cabecalho .vr-botao--primario {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 1024px) {
  .vr-menu-mobile-botao {
    display: none;
  }

  .vr-cabecalho__telefone {
    display: inline-block;
  }
}

/* ==========================================================================
   Página residencial — estilos específicos
   Identidade própria em tons de dourado e âmbar (variações claras da cor
   --dourado já usada nos botões), com tópicos em cartão-selo e passos em
   cartão com número circular — diferente dos tratamentos usados nas
   demais páginas.
   ========================================================================== */

.vr-secao-sustentabilidade {
  background-color: rgba(46, 125, 91, 0.08);
}

.vr-secao-sustentabilidade h2 {
  color: var(--verde);
}

.vr-texto-centro {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.vr-texto-centro .vr-cartao__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
}

.vr-caixa-destaque {
  border-left: 4px solid var(--dourado);
  background-color: var(--claro);
  padding: var(--espaco-md);
  border-radius: var(--raio-borda);
}

.vr-cartao__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--dourado);
  color: var(--azul-escuro);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---------- Variações de fundo em tons de dourado e âmbar ---------- */
.vr-secao-dourado-clara {
  background-color: #F8F1E5;
}

.vr-secao-dourado-media {
  background-color: #F0E2C9;
}

/* ---------- Tópicos em cartão-selo ---------- */
.vr-lista-lar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
  margin: 0 0 var(--espaco-md);
}

@media (min-width: 480px) {
  .vr-lista-lar {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.vr-lista-lar__item {
  position: relative;
  background-color: var(--branco);
  border-radius: var(--raio-borda);
  padding: var(--espaco-lg) var(--espaco-md) var(--espaco-md);
  box-shadow: var(--sombra-suave);
}

.vr-lista-lar__selo {
  position: absolute;
  top: -1rem;
  left: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--dourado);
  border-radius: 8px;
  box-shadow: var(--sombra-suave);
  transform: rotate(45deg);
}

.vr-lista-lar__selo span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--azul-escuro);
  font-weight: 700;
  transform: rotate(-45deg);
}

.vr-lista-lar__item h3 {
  color: var(--azul-escuro);
}

.vr-lista-lar__item p {
  margin: 0;
}

/* ---------- Hero da página residencial ---------- */
.vr-pagina-residencial .vr-hero {
  --vr-hero-imagem: url("../img/residencial-hero.jpg");
}

/* ---------- Hero da página comercial ---------- */
.vr-pagina-comercial .vr-hero {
  --vr-hero-imagem: url("../img/comercial-hero.jpg");
}

/* ---------- Hero da página industrial ---------- */
.vr-pagina-industrial .vr-hero {
  --vr-hero-imagem: url("../img/industrial-hero.jpg");
}

/* ---------- Hero da página rural ---------- */
.vr-pagina-rural .vr-hero {
  --vr-hero-imagem: url("../img/rural-hero.jpg");
}

/* ---------- Hero da página construções ---------- */
.vr-pagina-construcoes .vr-hero {
  --vr-hero-imagem: url("../img/construcoes-hero.jpg");
}

/* Nesta página a transparência sai do centro (a foto some no meio) e fica
   nítida para a esquerda e para a direita, com uma transição mais curta do
   que o degradê lateral usado nas outras páginas. */
@media (min-width: 768px) {
  .vr-pagina-construcoes .vr-hero::after {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.97) 42%, rgba(255, 255, 255, 0.97) 58%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.15) 100%);
  }
}

/* O texto do hero fica sobre a faixa opaca central, então é centralizado
   em vez de alinhado à esquerda como nas outras páginas. */
.vr-pagina-construcoes .vr-hero__conteudo {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Acento em azul (em vez de dourado) ----------
   Só nesta página: botões e detalhes que usavam a cor de destaque padrão
   (dourado) passam a usar o mesmo azul de fundo da barra de âncoras. */
.vr-pagina-residencial .vr-botao--primario {
  background-color: var(--azul);
  color: var(--branco);
}

.vr-pagina-residencial .vr-cartao__numero {
  background-color: var(--azul);
  color: var(--branco);
}

.vr-pagina-residencial .vr-caixa-destaque {
  border-left-color: var(--azul);
}

.vr-pagina-residencial .vr-lista-lar__selo {
  background-color: var(--azul);
}

.vr-pagina-residencial .vr-lista-lar__selo span {
  color: var(--branco);
}

/* ==========================================================================
   Página comercial — estilos específicos
   Identidade visual própria dentro da mesma paleta: acento em azul (em vez
   de dourado), lista de tópicos com marcador e passos em linha horizontal,
   para diferenciar do tratamento usado na página residencial.
   ========================================================================== */

.vr-caixa-destaque--azul {
  border-left-color: var(--azul);
}

/* ---------- Variações de fundo em tons de azul ---------- */
.vr-secao-azul-clara {
  background-color: #E4ECF6;
}

.vr-secao-azul-media {
  background-color: #CBDCF0;
}

/* ---------- Lista de tópicos com marcador ---------- */
.vr-lista-topicos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  margin: 0 0 var(--espaco-md);
}

.vr-lista-topicos li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-sm);
}

.vr-lista-topicos li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 0.55em;
  background-color: var(--azul);
  border-radius: 2px;
}

.vr-lista-topicos strong {
  color: var(--azul-escuro);
}

.vr-lista-topicos p {
  margin: 0;
}

/* ---------- Passos em linha horizontal ---------- */
.vr-linha-passos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.vr-linha-passos__passo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-top: var(--espaco-sm);
  border-top: 3px solid var(--azul);
}

.vr-linha-passos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-borda);
  background-color: var(--azul);
  color: var(--branco);
  font-weight: 700;
  font-size: 1.05rem;
}

.vr-linha-passos__passo h3 {
  color: var(--azul-escuro);
}

@media (min-width: 768px) {
  .vr-linha-passos {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .vr-linha-passos__passo {
    flex: 1 1 160px;
  }
}

/* ==========================================================================
   Página industrial — estilos específicos
   Identidade própria em cinza e branco, com acento em azul-escuro: tópicos
   em formato de ficha técnica e passos em protocolo vertical numerado —
   evocando segurança e procedimento, diferente do tratamento em lista com
   marcador e passos em linha horizontal usado na página comercial.
   ========================================================================== */

.vr-caixa-destaque--cinza {
  border-left-color: var(--cinza);
}

/* ---------- Tópicos em ficha técnica ---------- */
.vr-grade-fichas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-md);
  margin: 0 0 var(--espaco-md);
}

@media (min-width: 480px) {
  .vr-grade-fichas {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.vr-ficha {
  background-color: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: var(--raio-borda);
  padding: var(--espaco-md);
}

.vr-ficha__tag {
  display: inline-block;
  font-size: var(--tamanho-pequeno);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza);
  border-bottom: 2px solid var(--azul-escuro);
  padding-bottom: 0.3rem;
  margin-bottom: var(--espaco-xs);
}

.vr-ficha h3 {
  color: var(--azul-escuro);
}

.vr-ficha p {
  margin-bottom: 0;
}

/* ---------- Passos em protocolo vertical ---------- */
.vr-protocolo {
  display: flex;
  flex-direction: column;
}

.vr-protocolo__etapa {
  display: flex;
  gap: var(--espaco-md);
}

.vr-protocolo__marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.vr-protocolo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: var(--azul-escuro);
  color: var(--branco);
  font-weight: 700;
  font-size: 1.05rem;
}

.vr-protocolo__linha {
  flex-grow: 1;
  width: 2px;
  min-height: 1.5rem;
  margin: 0.35rem 0;
  background-color: var(--cinza);
}

.vr-protocolo__etapa:last-child .vr-protocolo__linha {
  display: none;
}

.vr-protocolo__conteudo {
  padding-bottom: var(--espaco-lg);
}

.vr-protocolo__etapa:last-child .vr-protocolo__conteudo {
  padding-bottom: 0;
}

.vr-protocolo__conteudo h3 {
  color: var(--azul-escuro);
}

/* ---------- Seção "Projeto e execução" — layout exclusivo ----------
   Foge do padrão de duas colunas usado no resto do site: o infográfico das
   7 etapas vem em largura total no topo, bem grande e legível, e o conteúdo
   de apoio (título, protocolo, texto e CTA) fica centralizado logo abaixo. */
.vr-secao-projeto .vr-container {
  display: flex;
  flex-direction: column;
}

.vr-secao-projeto__imagem {
  margin-bottom: var(--espaco-lg);
}

.vr-secao-projeto__imagem img {
  width: 100%;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
}

.vr-secao-projeto__conteudo {
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
   Página rural — estilos específicos
   Identidade própria com mais presença do verde e um traço orgânico:
   lista com marcador redondo em formato de "pílula" e trilha de passos com
   círculos pontilhados — diferente da ficha técnica e do protocolo vertical
   usados na página industrial, e da lista com marcador e passos em linha
   da página comercial.
   ========================================================================== */

.vr-caixa-destaque--verde {
  border-left-color: var(--verde);
}

/* ---------- Seção economia: imagem alinhada com a lista de tópicos, não com a seção inteira ---------- */
.vr-pagina-rural #economia .vr-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--espaco-lg);
}

.vr-pagina-rural #economia .vr-secao-dividida__coluna:first-child {
  display: contents;
}

.vr-pagina-rural #economia .vr-lista-colheita {
  grid-column: 1;
  grid-row: 2;
}

.vr-pagina-rural #economia .vr-texto-centro {
  grid-column: 1;
  grid-row: 3;
}

.vr-pagina-rural #economia .vr-secao-dividida__coluna:last-child {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

@media (max-width: 767px) {
  .vr-pagina-rural #economia .vr-container {
    grid-template-columns: 1fr;
  }

  .vr-pagina-rural #economia .vr-lista-colheita,
  .vr-pagina-rural #economia .vr-texto-centro,
  .vr-pagina-rural #economia .vr-secao-dividida__coluna:last-child {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }
}

/* ---------- Variações de fundo em tons de verde ---------- */
.vr-secao-verde-clara {
  background-color: #E3F0E8;
}

.vr-secao-verde-media {
  background-color: #C6E2D2;
}

/* ---------- Lista com marcador redondo ---------- */
.vr-lista-colheita {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  margin: 0 0 var(--espaco-md);
}

.vr-lista-colheita li {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
  background-color: var(--branco);
  border-radius: 999px 12px 12px 999px;
  padding: var(--espaco-sm) var(--espaco-md);
  box-shadow: var(--sombra-suave);
}

.vr-lista-colheita__marcador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--verde);
  color: var(--branco);
  font-weight: 700;
}

.vr-lista-colheita p {
  margin: 0;
}

/* ---------- Trilha de passos com círculos pontilhados ---------- */
.vr-trilha {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-lg);
}

.vr-trilha__etapa {
  text-align: center;
}

.vr-trilha__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--espaco-xs);
  border: 2px dashed var(--verde);
  border-radius: 50%;
  color: var(--verde);
  font-weight: 700;
  font-size: 1.1rem;
}

.vr-trilha__etapa h3 {
  color: var(--azul-escuro);
}

@media (min-width: 768px) {
  .vr-trilha {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .vr-trilha__etapa {
    flex: 1 1 150px;
  }
}

/* ==========================================================================
   Página construções — estilos específicos
   Identidade sóbria em azul e cinza, com dourado só nos botões: rótulo em
   pílula para diferenciar os dois públicos, lista de tópicos com barra
   vertical (referência a linha de fundação) e fluxo de papéis em colunas
   conectadas por seta — diferente dos tratamentos usados nas demais páginas.
   ========================================================================== */

.vr-rotulo {
  display: inline-block;
  font-size: var(--tamanho-pequeno);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  border: 1px solid var(--azul);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  margin-bottom: var(--espaco-sm);
}

/* ---------- Lista de tópicos com barra vertical ---------- */
.vr-lista-fundacao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  margin: 0 0 var(--espaco-md);
}

.vr-lista-fundacao li {
  padding-left: var(--espaco-sm);
  border-left: 3px solid var(--azul-escuro);
}

.vr-lista-fundacao strong {
  color: var(--azul-escuro);
}

.vr-lista-fundacao p {
  margin: 0;
}

/* ---------- Fluxo de papéis (venda direta) ---------- */
.vr-fluxo-parceria {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  margin: 0 0 var(--espaco-lg);
}

.vr-fluxo-parceria__papel {
  background-color: var(--branco);
  border-radius: var(--raio-borda);
  padding: var(--espaco-md);
  box-shadow: var(--sombra-suave);
  text-align: center;
}

.vr-fluxo-parceria__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--espaco-xs);
  border-radius: 50%;
  background-color: var(--azul-escuro);
  color: var(--branco);
  font-weight: 700;
}

.vr-fluxo-parceria__papel h3 {
  color: var(--azul-escuro);
}

.vr-fluxo-parceria__papel p {
  margin: 0;
}

.vr-fluxo-parceria__seta {
  display: none;
}

@media (min-width: 768px) {
  .vr-fluxo-parceria {
    flex-direction: row;
    align-items: stretch;
  }

  .vr-fluxo-parceria__papel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .vr-fluxo-parceria__seta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--cinza);
    font-size: 1.5rem;
  }
}

/* ---------- Credenciais técnicas ---------- */
.vr-credenciais {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-md);
}

@media (min-width: 480px) {
  .vr-credenciais {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.vr-credencial {
  background-color: var(--claro);
  border-top: 3px solid var(--azul-escuro);
  border-radius: var(--raio-borda);
  padding: var(--espaco-md);
}

.vr-credencial h3 {
  color: var(--azul-escuro);
}

.vr-credencial p {
  margin: 0;
}

/* ---------- Ênfase pontual em vermelho no título da seção de segurança ----------
   Uso exclusivo nas páginas comercial e industrial, a pedido do cliente.
   Não faz parte da paleta padrão do site — não reaproveitar em outras seções. */
.vr-pagina-comercial #seguranca h2,
.vr-pagina-industrial #seguranca h2 {
  color: #B3261E;
}

/* ---------- Formulário de simulação (página simulacao.html) ---------- */
.vr-formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-md);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--espaco-lg);
  background-color: var(--claro);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
}

@media (min-width: 600px) {
  .vr-formulario {
    grid-template-columns: 1fr 1fr;
  }

  .vr-formulario__campo--largo,
  .vr-formulario__acoes {
    grid-column: 1 / -1;
  }
}

.vr-campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vr-campo label {
  font-size: var(--tamanho-pequeno);
  font-weight: 700;
  color: var(--azul-escuro);
}

.vr-campo input {
  font: inherit;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(11, 31, 58, 0.18);
  border-radius: var(--raio-borda);
  background-color: var(--branco);
  color: var(--azul-escuro);
  min-height: var(--alvo-toque);
}

.vr-campo input:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(201, 146, 46, 0.25);
}

.vr-campo input.vr-campo--valido {
  border-color: var(--verde);
}

.vr-campo input.vr-campo--invalido {
  border-color: #B3261E;
}

.vr-campo__ajuda {
  margin: 0;
  font-size: var(--tamanho-pequeno);
  color: var(--cinza);
}

.vr-campo__ajuda a {
  color: var(--azul);
}

.vr-campo__ajuda--valido {
  color: var(--verde);
  font-weight: 600;
}

.vr-campo__ajuda--invalido {
  color: #B3261E;
  font-weight: 600;
}

.vr-formulario__acoes {
  text-align: center;
}

.vr-formulario__sucesso,
.vr-formulario__erro {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--espaco-lg);
  background-color: var(--branco);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
  text-align: center;
}

.vr-formulario__sucesso h2 {
  color: var(--verde);
}

.vr-formulario__erro {
  border: 1px solid rgba(201, 146, 46, 0.5);
}

.vr-formulario__erro p {
  margin: 0 0 var(--espaco-sm);
}