/* =============================================================================
   Dumont Imóveis — singular.css
   Páginas internas: o topo com foto (Contato, Anuncie, páginas comuns),
   página comum e post (singular.php) e 404.
   .conteudo-texto = o que vem do editor: tipografia de leitura.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   Topo das páginas internas (template-parts/pagina/topo.php)
   A moldura do hero da home em tamanho menor: dá o contraste que faltava
   entre o header (papel) e a página (papel), sem virar um segundo hero.
   Sem animação de entrada: a ousadia continua só na home.
   -------------------------------------------------------------------------- */
.topo-pagina {
  --dm-foco: var(--dm-ouro-claro);
  padding: 12px 12px 0;    /* mesma distância da borda que o hero — bate com o sizes da foto */
}

.topo-pagina__moldura {
  position: relative;
  isolation: isolate;      /* foto (-2) e véu (-1) ficam presos na moldura */
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 3.75rem);
  overflow: hidden;
  border-radius: var(--dm-raio-xl);
  background: var(--dm-profundo);
  color: #fff;
}

/* Com conteúdo por cima, a moldura ganha embaixo o espaço que ele ocupa */
.topo-pagina--sobreposto .topo-pagina__moldura {
  padding-bottom: calc(clamp(2.25rem, 5vw, 3.75rem) + var(--dm-sobe));
}

.topo-pagina__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu: no celular escurece por igual (o texto ocupa a largura toda); no
   desktop, forte à esquerda onde está o texto e a foto aparece à direita. */
.topo-pagina__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(8, 18, 40, .9) 0%, rgba(8, 18, 40, .78) 100%);
}

@media (min-width: 992px) {
  .topo-pagina__veu {
    background:
      linear-gradient(90deg, rgba(8, 18, 40, .92) 0%, rgba(8, 18, 40, .78) 40%, rgba(8, 18, 40, .3) 78%, rgba(8, 18, 40, .12) 100%),
      linear-gradient(0deg, rgba(8, 18, 40, .45) 0%, rgba(8, 18, 40, 0) 50%);
  }
}

.topo-pagina__conteudo {
  position: relative;
}

.topo-pagina__conteudo > :last-child {
  margin-bottom: 0;
}

/* Migalhas em claro sobre a foto */
.topo-pagina .migalhas,
.topo-pagina .migalhas a {
  color: rgba(255, 255, 255, .72);
}

.topo-pagina .migalhas a:hover,
.topo-pagina .migalhas .breadcrumb_last {
  color: #fff;
}

/* Selo em vidro, igual à chamada do hero */
.topo-pagina__selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: .4rem .95rem .4rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-size: .85rem;
  font-weight: 500;
}

.topo-pagina__selo .icone {
  color: var(--dm-ouro-claro);
}

.topo-pagina__titulo {
  max-width: 20ch;
  margin: .9rem 0 0;
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  color: #fff;
}

/* Traço dourado do logo embaixo do título: a assinatura da marca */
.topo-pagina__titulo::after {
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 1rem;
  border-radius: 4px;
  background: var(--dm-degrade-ouro);
  content: "";
}

.topo-pagina__texto {
  max-width: 50ch;
  margin: 1rem 0 0;
  font-size: clamp(1.02rem, .97rem + .3vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}

/* O que vem logo depois do topo sobreposto sobe por cima da borda da foto */
.sobe-no-topo {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--dm-sobe));
}


/* -----------------------------------------------------------------------------
   Página comum e post
   O texto fica numa folha branca que sobe por cima do topo.
   -------------------------------------------------------------------------- */
.singular {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.singular__folha {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--dm-raio-lg);
  background: var(--dm-superficie);
  box-shadow: var(--dm-sombra-2);
}

.singular__data {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.5rem;
  font-size: .9rem;
  color: var(--dm-suave);
}

/* 404: mantém o título próprio, sem o topo com foto */
.singular__titulo {
  margin: .5rem 0 0;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
  letter-spacing: -.02em;
}


/* -----------------------------------------------------------------------------
   Texto do editor
   Linha de ~70 caracteres e entrelinha generosa: o tamanho que se lê sem
   cansar. Só elementos soltos do editor — nada de classe de plugin aqui.
   -------------------------------------------------------------------------- */
.conteudo-texto {
  max-width: 70ch;
  font-size: 1.06rem;
  line-height: 1.75;
}

.conteudo-texto > * + * {
  margin-top: 1.1em;
}

.conteudo-texto p,
.conteudo-texto ul,
.conteudo-texto ol {
  margin-bottom: 0;
}

.conteudo-texto h2 {
  margin: 2.2em 0 .6em;
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem);
}

.conteudo-texto h3 {
  margin: 1.8em 0 .5em;
  font-size: 1.25rem;
}

.conteudo-texto a {
  font-weight: 500;
  color: var(--dm-acento);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.conteudo-texto ul,
.conteudo-texto ol {
  padding-left: 1.25rem;
}

.conteudo-texto li + li {
  margin-top: .4em;
}

.conteudo-texto li::marker {
  color: var(--dm-ouro-texto);
}

.conteudo-texto blockquote {
  margin-inline: 0;
  padding: 1rem 1.5rem;
  border-radius: var(--dm-raio);
  background: var(--dm-superficie);
  box-shadow: var(--dm-sombra-1);
  font-size: 1.1rem;
}

.conteudo-texto img {
  max-width: 100%;
  height: auto;
  border-radius: var(--dm-raio);
}

.conteudo-texto table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

/* Tabela larga no celular: rola de lado dentro dela, sem empurrar a página */
.conteudo-texto table {
  display: block;
  overflow-x: auto;
}

/* Ficha da empresa na Política ([dumont_empresa], inc/privacidade.php) */
.politica-empresa {
  display: grid;
  gap: .15rem 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--dm-raio);
  background: var(--dm-papel);
}

.politica-empresa dt {
  font-size: .85rem;
  font-weight: 600;
  color: var(--dm-suave);
}

.politica-empresa dd {
  margin: 0 0 .5rem;
  color: var(--dm-tinta);
}

@media (min-width: 576px) {
  .politica-empresa {
    grid-template-columns: max-content 1fr;
  }

  .politica-empresa dd {
    margin: 0;
  }
}

.conteudo-texto th,
.conteudo-texto td {
  padding: .6rem .75rem;
  box-shadow: inset 0 -1px 0 var(--dm-linha);
  text-align: left;
}


/* -----------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.pagina-404 {
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* O "404" grande em contorno dourado: decorativo (aria-hidden no HTML) */
.pagina-404__codigo {
  margin: 0;
  font-family: var(--dm-fonte-titulo);
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--dm-ouro);
}

.pagina-404__texto {
  max-width: 52ch;
  margin: 1rem auto 2rem;
  font-size: 1.1rem;
  color: var(--dm-suave);
}

.pagina-404__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.pagina-404__tipos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 2.5rem 0 0;
}