/* ============================================================================
   Arquivo: keyholder/ativos/css/index.css
   Descrição: Estilos exclusivos da página inicial (index.html)
   Diretriz Estética: Heritage Estate Care / Atlantic Refined (Skill frontend-design)
   Regra: Zero CSS inline em todo o HTML
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --fonte-titulos: 'Fraunces', Georgia, serif;
  --fonte-corpo: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Paleta Orgânica do Norte de Portugal */
  --cor-fundo-base: #faf8f4;
  --cor-fundo-card: #ffffff;
  --cor-fundo-suave: #f2ece2;
  --cor-fundo-destaque: #b8543a;

  --cor-verde-primario: #183728;
  --cor-verde-hover: #10261b;
  --cor-verde-claro: #ebf3ee;
  --cor-verde-borda: #cedcd3;

  --cor-terracota: #bf5b40;
  --cor-terracota-hover: #a54a32;
  --cor-terracota-suave: #f9eeea;

  --cor-dourado: #c49d5c;
  --cor-dourado-suave: #faf5eb;

  --cor-texto-escuro: #161e19;
  --cor-texto-medio: #536158;
  --cor-texto-claro: #f7f9f8;
  --cor-texto-apagado: #84938a;

  --cor-borda-suave: #e5ded3;
  --cor-borda-forte: #cfc5b6;

  --sombra-card: 0 4px 20px rgba(22, 30, 25, 0.05);
  --sombra-hover: 0 14px 34px rgba(22, 30, 25, 0.10);
  --sombra-header: 0 2px 14px rgba(22, 30, 25, 0.04);

  --raio-pequeno: 6px;
  --raio-medio: 12px;
  --raio-grande: 20px;
  --raio-pill: 999px;

  --largura-maxima: 1200px;
  --transicao-padrao: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset Global e Tipografia */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--fonte-corpo);
  background-color: var(--cor-fundo-base);
  color: var(--cor-texto-escuro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transicao-padrao);
}

button, select {
  font-family: inherit;
  font-size: inherit;
}

.conteiner {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============================================================================
   Cabeçalho de Navegação (Design Coeso, Alinhamento Preciso e Sem Quebra de Linha)
============================================================================ */
.cabecalho-principal {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(250, 248, 244, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cor-borda-suave);
  box-shadow: 0 2px 16px rgba(22, 30, 25, 0.05);
}

.cabecalho-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: 1240px;
}

.logotipo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logotipo-imagem {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: var(--transicao-padrao);
}

.logotipo-imagem:hover {
  transform: scale(1.03);
}

.navegacao-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;
}

.menu-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cor-texto-medio);
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
  display: inline-block;
  transition: var(--transicao-padrao);
}

.menu-link:hover {
  color: var(--cor-verde-primario);
}

.menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--cor-terracota);
  transition: var(--transicao-padrao);
}

.menu-link:hover::after {
  width: 100%;
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

/* Seletor de Idiomas Padronizado (Altura 40px, Idêntica ao Botão de Login) */
.seletor-idioma-embrulho {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.seletor-idioma-embrulho::after {
  content: '▾';
  position: absolute;
  right: 14px;
  font-size: 0.75rem;
  color: var(--cor-texto-medio);
  pointer-events: none;
}

.campo-seletor-idioma {
  appearance: none;
  background-color: #ffffff;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-pill);
  height: 40px;
  padding: 0 2.2rem 0 1.1rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cor-texto-escuro);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: var(--transicao-padrao);
  display: inline-flex;
  align-items: center;
}

.campo-seletor-idioma:hover,
.campo-seletor-idioma:focus {
  border-color: var(--cor-terracota);
  outline: none;
  box-shadow: 0 2px 8px rgba(191, 91, 64, 0.12);
}

/* Botão de Área de Clientes Padronizado (Altura 40px, Perfeita Coesão) */
.botao-entrar-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 1.35rem;
  border-radius: var(--raio-pill);
  background-color: var(--cor-terracota-suave);
  color: var(--cor-terracota);
  border: 1px solid rgba(191, 91, 64, 0.28);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: var(--transicao-padrao);
}

.botao-entrar-topo:hover {
  background-color: var(--cor-terracota);
  color: #ffffff;
  border-color: var(--cor-terracota);
  box-shadow: 0 4px 12px rgba(191, 91, 64, 0.24);
  transform: translateY(-1px);
}

/* Botão Menu Mobile */
.botao-menu-mobile {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--cor-verde-primario);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

/* ============================================================================
   Seção Hero (Apresentação Principal)
============================================================================ */
.secao-hero {
  padding: 4.5rem 0 5.5rem 0;
  background: radial-gradient(circle at 80% 20%, rgba(229, 219, 203, 0.4) 0%, transparent 60%);
  position: relative;
  overflow: hidden;
}

.hero-grade {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-tag-local {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--cor-terracota-suave);
  color: var(--cor-terracota);
  padding: 0.35rem 0.95rem;
  border-radius: var(--raio-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(191, 91, 64, 0.2);
}

.hero-titulo {
  font-family: var(--fonte-titulos);
  font-size: 3.2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--cor-verde-primario);
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.hero-subtitulo {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--cor-texto-medio);
  margin-bottom: 2.2rem;
  max-width: 580px;
}

.hero-botoes {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.botao-destaque-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background-color: var(--cor-terracota);
  color: #ffffff;
  padding: 0.95rem 1.85rem;
  border-radius: var(--raio-pill);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(191, 91, 64, 0.28);
}

.botao-destaque-cta:hover {
  background-color: var(--cor-terracota-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(191, 91, 64, 0.35);
}

.botao-secundario-portal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--cor-fundo-card);
  color: var(--cor-verde-primario);
  border: 1.5px solid var(--cor-borda-forte);
  padding: 0.9rem 1.75rem;
  border-radius: var(--raio-pill);
  font-weight: 600;
  font-size: 1rem;
}

.botao-secundario-portal:hover {
  border-color: var(--cor-verde-primario);
  background-color: var(--cor-verde-claro);
  transform: translateY(-2px);
}

/* Selos de Confiança Hero */
.hero-selos {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-borda-suave);
}

.selo-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-medio);
}

.selo-icone {
  color: var(--cor-verde-primario);
  font-weight: bold;
}

/* Card Visual de Apresentação Hero */
.hero-card-visual {
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: 2rem;
  box-shadow: var(--sombra-hover);
  position: relative;
}

.hero-card-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cor-borda-suave);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.badge-status-visita {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--cor-verde-claro);
  color: var(--cor-verde-primario);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: var(--raio-pill);
}

.badge-status-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #27ae60;
  display: inline-block;
}

.hero-imovel-titulo {
  font-family: var(--fonte-titulos);
  font-size: 1.25rem;
  color: var(--cor-verde-primario);
  font-weight: 700;
}

.hero-imovel-local {
  font-size: 0.82rem;
  color: var(--cor-texto-medio);
}

.grade-itens-vistoria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.item-vistoria-box {
  background-color: var(--cor-fundo-base);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-medio);
  padding: 0.85rem 1rem;
}

.item-vistoria-rotulo {
  font-size: 0.75rem;
  color: var(--cor-texto-apagado);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.item-vistoria-valor {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cor-verde-primario);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-alerta-box {
  background-color: var(--cor-dourado-suave);
  border-left: 3px solid var(--cor-dourado);
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
  padding: 0.85rem 1rem;
  font-size: 0.84rem;
  color: var(--cor-texto-escuro);
}

/* ============================================================================
   Seção: O Problema Real (As Dores do Dono Ausente)
============================================================================ */
.secao-dores {
  padding: 6rem 0;
  background-color: #ffffff;
  border-top: 1px solid var(--cor-borda-suave);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.cabecalho-secao {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem auto;
}

.tag-secao {
  display: inline-block;
  color: var(--cor-terracota);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.titulo-secao {
  font-family: var(--fonte-titulos);
  font-size: 2.4rem;
  line-height: 1.2;
  color: var(--cor-verde-primario);
  margin-bottom: 1rem;
  font-weight: 700;
}

.subtitulo-secao {
  font-size: 1.05rem;
  color: var(--cor-texto-medio);
  line-height: 1.6;
}

.grade-dores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.card-dor {
  background-color: var(--cor-fundo-base);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: 2rem 1.5rem;
  transition: var(--transicao-padrao);
}

.card-dor:hover {
  transform: translateY(-4px);
  border-color: var(--cor-borda-forte);
  box-shadow: var(--sombra-card);
}

.icone-dor {
  width: 50px;
  height: 50px;
  background-color: var(--cor-terracota-suave);
  color: var(--cor-terracota);
  border-radius: var(--raio-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

.titulo-dor {
  font-family: var(--fonte-titulos);
  font-size: 1.25rem;
  color: var(--cor-verde-primario);
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.texto-dor {
  font-size: 0.9rem;
  color: var(--cor-texto-medio);
  line-height: 1.55;
}

/* ============================================================================
   Seção: Serviços & Avenças
============================================================================ */
.secao-servicos {
  padding: 6.5rem 0;
  background-color: var(--cor-fundo-base);
}

.grade-servicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card-servico {
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transicao-padrao);
  box-shadow: var(--sombra-card);
  position: relative;
}

.card-servico:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-hover);
  border-color: var(--cor-verde-borda);
}

.card-servico-topo {
  margin-bottom: 1.5rem;
}

.tag-servico {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-verde-primario);
  background-color: var(--cor-verde-claro);
  padding: 0.3rem 0.75rem;
  border-radius: var(--raio-pill);
  margin-bottom: 1rem;
}

.titulo-servico {
  font-family: var(--fonte-titulos);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--cor-verde-primario);
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.desc-servico {
  font-size: 0.95rem;
  color: var(--cor-texto-medio);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.preco-servico {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-terracota);
  padding: 0.75rem 0;
  border-top: 1px dashed var(--cor-borda-suave);
  border-bottom: 1px dashed var(--cor-borda-suave);
  margin-bottom: 1.5rem;
}

.lista-itens-servico {
  list-style: none;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.item-lista-servico {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--cor-texto-escuro);
}

.check-icone {
  color: #27ae60;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

.botao-servico-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--raio-pill);
  border: 1.5px solid var(--cor-terracota);
  color: var(--cor-terracota);
  font-weight: 600;
  font-size: 0.92rem;
  background-color: transparent;
  cursor: pointer;
  transition: var(--transicao-padrao);
}

.botao-servico-card:hover {
  background-color: var(--cor-terracota);
  color: #ffffff;
}

/* ============================================================================
   Seção: Cuidado Físico & Manutenção de Fim de Semana (Serviços Adicionais)
============================================================================ */
.secao-manutencao {
  padding: 6.5rem 0;
  background-color: #ffffff;
  border-top: 1px solid var(--cor-borda-suave);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.grade-manutencao {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card-manutencao {
  background-color: var(--cor-fundo-base);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transicao-padrao);
  box-shadow: var(--sombra-card);
  position: relative;
}

.card-manutencao:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-hover);
  border-color: var(--cor-terracota);
}

.card-manutencao-destaque {
  border: 2px solid var(--cor-terracota);
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(191, 91, 64, 0.12);
}

.manutencao-icone-box {
  width: 50px;
  height: 50px;
  background-color: var(--cor-terracota-suave);
  color: var(--cor-terracota);
  border-radius: var(--raio-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.badge-manutencao {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-terracota);
  background-color: var(--cor-terracota-suave);
  padding: 0.3rem 0.75rem;
  border-radius: var(--raio-pill);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

.badge-alerta {
  background-color: #fdf2e9;
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.2);
}

.titulo-manutencao {
  font-family: var(--fonte-titulos);
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--cor-verde-primario);
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.desc-manutencao {
  font-size: 0.92rem;
  color: var(--cor-texto-medio);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.lista-manutencao-itens {
  list-style: none;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lista-manutencao-itens li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--cor-texto-escuro);
}

.rodape-card-manutencao {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px dashed var(--cor-borda-suave);
  padding-top: 1.25rem;
}

.preco-manutencao {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cor-terracota);
}

.botao-manutencao-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--raio-pill);
  border: 1.5px solid var(--cor-terracota);
  color: var(--cor-terracota);
  font-weight: 600;
  font-size: 0.92rem;
  background-color: transparent;
  cursor: pointer;
  transition: var(--transicao-padrao);
}

.botao-manutencao-card:hover {
  background-color: var(--cor-terracota);
  color: #ffffff;
}

.botao-destaque-manutencao {
  background-color: var(--cor-terracota);
  color: #ffffff;
  border-color: var(--cor-terracota);
  box-shadow: 0 4px 14px rgba(191, 91, 64, 0.22);
}

.botao-destaque-manutencao:hover {
  background-color: var(--cor-terracota-hover);
}

/* ============================================================================
   Seção: Como Funciona (3 Passos)
============================================================================ */
.secao-passos {
  padding: 6rem 0;
  background-color: #ffffff;
  border-top: 1px solid var(--cor-borda-suave);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.grade-passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  position: relative;
}

.card-passo {
  position: relative;
  padding: 2.5rem 2rem;
  background-color: var(--cor-fundo-base);
  border-radius: var(--raio-grande);
  border: 1px solid var(--cor-borda-suave);
}

.numero-passo {
  font-family: var(--fonte-titulos);
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--cor-terracota);
  opacity: 0.85;
  margin-bottom: 1rem;
}

.titulo-passo {
  font-family: var(--fonte-titulos);
  font-size: 1.35rem;
  color: var(--cor-verde-primario);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.desc-passo {
  font-size: 0.92rem;
  color: var(--cor-texto-medio);
  line-height: 1.6;
}

/* ============================================================================
   Seção: Demonstração do Portal Privado (Identidade Terracota Nobre)
============================================================================ */
.secao-demo {
  padding: 6.5rem 0;
  background: linear-gradient(150deg, #be583d 0%, #9f442a 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.demo-cabecalho {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem auto;
}

.tag-demo {
  display: inline-block;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--raio-pill);
  margin-bottom: 0.9rem;
}

.titulo-demo {
  font-family: var(--fonte-titulos);
  font-size: 2.6rem;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 700;
}

.subtitulo-demo {
  font-size: 1.1rem;
  color: #fbeee9;
  line-height: 1.6;
}

/* Janela do Mockup: Dashboard Límpido, Claro e de Alto Contraste */
.demo-janela-portal {
  background-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--raio-grande);
  box-shadow: 0 24px 60px rgba(94, 33, 18, 0.35);
  overflow: hidden;
}

.demo-barra-janela {
  background-color: #f7f3ed;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid #ebd9c8;
}

.demo-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.ponto-vermelho { background-color: #e74c3c; }
.ponto-amarelo { background-color: #f1c40f; }
.ponto-verde { background-color: #2ecc71; }

.demo-endereco-barra {
  font-size: 0.8rem;
  color: #7c6f62;
  background-color: #ffffff;
  border: 1px solid #e2d6c6;
  padding: 0.3rem 1.25rem;
  border-radius: var(--raio-pill);
  margin-left: 1rem;
  font-weight: 500;
}

.demo-corpo-portal {
  padding: 2.5rem;
  background-color: #ffffff;
}

.demo-grade-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.demo-status-card {
  background-color: #faf7f2;
  border: 1px solid #ebe2d5;
  border-radius: var(--raio-medio);
  padding: 1.25rem;
  transition: var(--transicao-padrao);
}

.demo-status-card:hover {
  border-color: var(--cor-terracota);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(191, 91, 64, 0.08);
}

.demo-status-titulo {
  font-size: 0.74rem;
  text-transform: uppercase;
  color: #8c7e71;
  margin-bottom: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.demo-status-valor {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cor-verde-primario);
}

.demo-galeria-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.demo-foto-box {
  background-color: #f3ece3;
  border: 1.5px solid #e7ddcf;
  border-radius: var(--raio-medio);
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.demo-foto-box:nth-child(1) {
  background: linear-gradient(135deg, #ede4d8 0%, #dbcbba 100%);
}

.demo-foto-box:nth-child(2) {
  background: linear-gradient(135deg, #e7ddcf 0%, #d3c1ac 100%);
}

.demo-foto-box:nth-child(3) {
  background: linear-gradient(135deg, #e2d7c8 0%, #cbb9a3 100%);
}

.demo-foto-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 33, 26, 0.85) 0%, rgba(22, 33, 26, 0.15) 55%, transparent 100%);
}

.demo-legenda-foto {
  position: relative;
  z-index: 2;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
   Seção: A Nossa Base & Proximidade Real no Terreno
============================================================================ */
.secao-base {
  padding: 6.5rem 0;
  background-color: #ffffff;
  border-top: 1px solid var(--cor-borda-suave);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.base-cartao-principal {
  background-color: var(--cor-fundo-base);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.5rem;
  align-items: center;
  box-shadow: var(--sombra-card);
}

.base-conteudo-coluna {
  display: flex;
  flex-direction: column;
}

.base-titulo {
  text-align: left;
  margin-bottom: 1.25rem;
}

.desc-base {
  font-size: 1rem;
  color: var(--cor-texto-medio);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.base-endereco-destaque {
  background-color: #ffffff;
  border: 1px solid var(--cor-borda-suave);
  border-left: 4px solid var(--cor-terracota);
  border-radius: var(--raio-medio);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.base-pin-icone {
  font-size: 2rem;
  flex-shrink: 0;
}

.base-endereco-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rotulo-base-morada {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-terracota);
  letter-spacing: 0.05em;
}

.texto-base-morada {
  font-size: 1.25rem;
  font-family: var(--fonte-titulos);
  color: var(--cor-verde-primario);
  font-weight: 700;
}

.sub-base-morada {
  font-size: 0.85rem;
  color: var(--cor-texto-medio);
}

.grade-tempos-resposta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card-tempo-resposta {
  background-color: #ffffff;
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-medio);
  padding: 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: var(--transicao-padrao);
}

.card-tempo-resposta:hover {
  border-color: var(--cor-terracota);
  transform: translateY(-2px);
}

.tempo-valor {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-terracota);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tempo-local {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cor-verde-primario);
}

.tempo-desc {
  font-size: 0.8rem;
  color: var(--cor-texto-medio);
  line-height: 1.4;
}

.base-destaque-card-lateral {
  height: 100%;
  display: flex;
}

.base-painel-seguranca {
  background: linear-gradient(155deg, #193026 0%, #0d1e16 100%);
  color: #ffffff;
  border-radius: var(--raio-grande);
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 32px rgba(25, 48, 38, 0.25);
  width: 100%;
}

.base-selo-emblema {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.base-painel-titulo {
  font-family: var(--fonte-titulos);
  font-size: 1.5rem;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 0.85rem;
}

.base-painel-texto {
  font-size: 0.92rem;
  color: #cad8d1;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.base-lista-beneficios {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.base-beneficio-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: #e5eee9;
  line-height: 1.45;
}

.botao-base-contacto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: var(--raio-pill);
  background-color: #25d366;
  color: #0b2214;
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--transicao-padrao);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3);
}

.botao-base-contacto:hover {
  background-color: #20ba59;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.4);
}

/* ============================================================================
   Seção: Tabela de Preçário
============================================================================ */
.secao-precos {
  padding: 6.5rem 0;
  background-color: var(--cor-fundo-base);
}

.grade-precos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.card-preco {
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-grande);
  padding: 2.75rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sombra-card);
  transition: var(--transicao-padrao);
  position: relative;
}

.card-preco:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-hover);
}

.card-preco-destaque {
  border: 2px solid var(--cor-terracota);
  transform: scale(1.03);
}

.card-preco-destaque:hover {
  transform: scale(1.03) translateY(-6px);
}

.badge-mais-recomendado {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--cor-terracota);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 1rem;
  border-radius: var(--raio-pill);
  box-shadow: 0 4px 10px rgba(191, 91, 64, 0.3);
}

.card-preco-nome {
  font-family: var(--fonte-titulos);
  font-size: 1.45rem;
  color: var(--cor-verde-primario);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.card-preco-sub {
  font-size: 0.88rem;
  color: var(--cor-texto-medio);
  margin-bottom: 1.5rem;
}

.valor-preco-linha {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.cifrao-valor {
  font-family: var(--fonte-titulos);
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--cor-verde-primario);
}

.periodo-valor {
  font-size: 0.95rem;
  color: var(--cor-texto-medio);
}

.lista-recursos-preco {
  list-style: none;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.item-recurso-preco {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--cor-texto-escuro);
}

.botao-plano-preco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.9rem 1.25rem;
  border-radius: var(--raio-pill);
  font-weight: 600;
  font-size: 0.95rem;
  background-color: var(--cor-terracota-suave);
  color: var(--cor-terracota);
  border: 1.5px solid rgba(191, 91, 64, 0.28);
  cursor: pointer;
  transition: var(--transicao-padrao);
}

.botao-plano-preco:hover {
  background-color: var(--cor-terracota);
  color: #ffffff;
  border-color: var(--cor-terracota);
}

.card-preco-destaque .botao-plano-preco {
  background-color: var(--cor-terracota);
  color: #ffffff;
  border-color: var(--cor-terracota);
  box-shadow: 0 4px 14px rgba(191, 91, 64, 0.25);
}

.card-preco-destaque .botao-plano-preco:hover {
  background-color: var(--cor-terracota-hover);
}

/* Nota de Taxa e Portagens nos Cards e Bloco Informativo */
.card-preco-nota-taxa {
  font-size: 0.78rem;
  color: var(--cor-terracota);
  margin-top: -1.15rem;
  margin-bottom: 1.4rem;
  font-weight: 600;
}

.precos-observacao-box {
  margin-top: 3.5rem;
  background-color: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda-suave);
  border-left: 4px solid var(--cor-terracota);
  border-radius: var(--raio-medio);
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--sombra-card);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.icone-info-preco {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.conteudo-obs-preco {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.titulo-obs-preco {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cor-verde-primario);
}

.texto-obs-preco {
  font-size: 0.86rem;
  color: var(--cor-texto-medio);
  line-height: 1.55;
}

.precos-addon-linha {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--cor-borda-suave);
}

.addon-destaque-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cor-terracota);
  letter-spacing: 0.05em;
}

.addon-destaque-texto {
  font-size: 0.84rem;
  color: var(--cor-texto-medio);
  line-height: 1.5;
}

/* ============================================================================
   Seção: Chamada Final (CTA) - Terracota Nobre com Botão WhatsApp Verde
============================================================================ */
.secao-cta-final {
  padding: 6.5rem 0;
  background: linear-gradient(150deg, #be583d 0%, #9f442a 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
}

.cta-final-conteudo {
  max-width: 720px;
  margin: 0 auto;
}

.cta-final-titulo {
  font-family: var(--fonte-titulos);
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #ffffff;
}

.cta-final-subtitulo {
  font-size: 1.15rem;
  color: #fcece7;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.botao-whatsapp-grande {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #25d366;
  color: #0b2214;
  padding: 1.15rem 2.35rem;
  border-radius: var(--raio-pill);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.38);
  margin-bottom: 1.25rem;
  transition: var(--transicao-padrao);
}

.botao-whatsapp-grande:hover {
  background-color: #20ba59;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.48);
}

.cta-final-nota {
  font-size: 0.85rem;
  color: #f2d7cf;
}

/* ============================================================================
   Rodapé - Tons Terracota Profundo e Argila Nobre
============================================================================ */
.rodape-principal {
  background-color: #2c1611;
  color: #d6c0b8;
  padding: 4.5rem 0 2.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.grade-rodape {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.8fr 0.9fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.rodape-morada-texto {
  font-size: 0.88rem;
  color: #e5d5ce;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.rodape-morada-texto strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.rodape-contatos-diretos {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 1rem;
}

.rodape-contato-linha {
  font-size: 0.88rem;
}

.rodape-contato-linha a {
  color: #f2d7cf;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transicao-padrao);
}

.rodape-contato-linha a:hover {
  color: #ffffff;
}

.rodape-sobre-marca {
  font-family: var(--fonte-titulos);
  font-size: 1.4rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.rodape-sobre-texto {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  color: #e5d5ce;
}

.rodape-regioes-texto {
  font-size: 0.82rem;
  color: #beaba2;
  line-height: 1.5;
}

.rodape-coluna-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rodape-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.rodape-links a {
  color: #d6c0b8;
}

.rodape-links a:hover {
  color: #ffffff;
}

.rodape-linha-inferior {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #aa968e;
}

/* ============================================================================
   Responsividade (Mobile & Tablet)
============================================================================ */
@media (max-width: 992px) {
  .hero-grade {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .navegacao-menu {
    display: none;
  }

  .botao-menu-mobile {
    display: block;
  }

  .navegacao-menu.ativo {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    background-color: var(--cor-fundo-base);
    padding: 1.5rem;
    border-bottom: 1px solid var(--cor-borda-suave);
    box-shadow: var(--sombra-card);
    z-index: 999;
  }

  .grade-dores {
    grid-template-columns: repeat(2, 1fr);
  }

  .grade-servicos,
  .grade-manutencao {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .grade-passos {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .grade-precos {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .card-preco-destaque {
    transform: none;
  }

  .demo-grade-status {
    grid-template-columns: repeat(2, 1fr);
  }

  .demo-galeria-fotos {
    grid-template-columns: 1fr;
    height: auto;
  }

  .grade-rodape {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .base-cartao-principal {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.75rem;
    gap: 2.5rem;
  }

  .grade-tempos-resposta {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

@media (max-width: 768px) {
  .hero-titulo {
    font-size: 2.4rem;
  }

  .grade-dores {
    grid-template-columns: 1fr;
  }

  .grade-rodape {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .rodape-linha-inferior {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}