/* ==========================================================================
   ELAS CORRETORAS — Skin exclusivo: CONDOMÍNIO HERMES
   Camada visual aplicada SOBRE tokens.css + base.css + property.css.
   Motivo próprio desta página: DESENHO TÉCNICO / PLANTA. O grande
   diferencial do Hermes é que o comprador recebe o apartamento pronto
   (obra concluída) mas entregue no bruto, com um projeto arquitetônico
   já assinado — ele "constrói" o próprio acabamento em cima de uma planta
   reversível (2 ou 4 suítes). Por isso a página usa linguagem de prancha
   de arquiteto, mas discreta: marcas de canto tipo registro de desenho
   técnico no hero, nos cards e na galeria, e uma "linha de cota"
   (dimension line) no dado de metragem — nada disso se repete em nenhuma
   outra página de imóvel (curva do Therra Luna, tarja dourada do Lourdes
   Lamartine, listras do Graciliano, recorte flutuante do Afonso, corte
   diagonal do Amadeus, régua sólida do Alto da Boa Vista). O hero em si
   usa o degradê padrão do site: a foto aérea real do prédio ao entardecer
   já é forte o bastante, sem elemento gráfico competindo com ela.
   Escopo: tudo dentro de body.property-hermes.
   ========================================================================== */

.property-hermes .eyebrow { color: var(--terracota); }
.property-hermes .eyebrow::after { background: var(--terracota); }

/* Overlay do hero: degradê padrão (esquerda→direita, texto sobre a
   esquerda) — a foto real do prédio ao entardecer já é o protagonista,
   sem grade sobreposta. O motivo de prancha técnica fica só nos detalhes
   discretos abaixo (cantos, linha de cota), não competindo com a imagem. */
.property-hermes .property-hero-full__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(32,33,31,0.92) 0%,
    rgba(32,33,31,0.72) 34%,
    rgba(32,33,31,0.38) 58%,
    rgba(32,33,31,0.14) 78%,
    rgba(32,33,31,0.04) 100%);
}

/* Painel do hero: só duas marcas de canto discretas (registro de prancha
   de arquiteto), sem borda nem fundo — a foto e o degradê acima já dão
   contraste suficiente para o texto. */
.property-hermes .property-hero-full__content { position: relative; }
.property-hermes .property-hero-full__content::before,
.property-hermes .property-hero-full__content::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 1.5px solid var(--terracota);
  border-left: 1.5px solid var(--terracota);
  top: -14px;
  left: 0;
}
.property-hermes .property-hero-full__content::after {
  top: auto;
  left: auto;
  bottom: 24px;
  right: -14px;
  border-top: none;
  border-left: none;
  border-bottom: 1.5px solid var(--terracota);
  border-right: 1.5px solid var(--terracota);
}

.property-hermes .property-specs-bar__item .icon,
.property-hermes .location-point .icon {
  color: var(--terracota);
}

/* "Linha de cota" — o dado de metragem (264 m²) ganha um traço com
   marcas de extremidade, como cota de desenho técnico, único nesta
   página entre os specs-bar de todo o site. */
.property-hermes .hm-cota {
  position: relative;
  display: inline-block;
  padding: 0 10px;
}
.property-hermes .hm-cota::before,
.property-hermes .hm-cota::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 8px;
  background: var(--terracota);
  transform: translateY(-50%);
}
.property-hermes .hm-cota::before { left: -2px; }
.property-hermes .hm-cota::after { right: -2px; }

/* Diferenciais: cartão com marca de canto (registro de prancha), sem
   selo circular (Therra Luna), sem borda dourada (Lourdes) e sem
   inversão de cor (Graciliano). */
.property-hermes .diferenciais-grid { gap: var(--space-3); }
.property-hermes .diferencial-item {
  position: relative;
  background: var(--marfim);
  border: 1px solid var(--grafite-12);
  border-radius: var(--radius-sm);
}
.property-hermes .diferencial-item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--terracota);
  border-left: 1.5px solid var(--terracota);
}
.property-hermes .diferencial-item h3 { color: var(--grafite); }
.property-hermes .diferencial-item p { color: var(--cinza-tecnico); }

/* Aviso de estado de entrega — reforça que a obra está concluída, mas
   entregue no bruto (não "inacabado/em obra" como no Afonso 1095). */
.property-hermes .property-unfinished {
  background: var(--marfim);
  border: 1px dashed var(--grafite-35);
}

/* Aba de galeria/plantas: "estado atual" x "projeto assinado" — texto
   e não selo, em linha com o clima técnico da página. */
.hm-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.hm-tab-nav {
  display: inline-flex;
  gap: 4px;
  background: var(--areia);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: var(--space-4);
  width: fit-content;
}
.hm-tab-nav button {
  border: none;
  background: transparent;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cinza-tecnico);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hm-tab-nav button.is-active { background: var(--grafite); color: var(--marfim); }
[data-tab-panel] { display: none; }
[data-tab-panel].is-active { display: block; }

/* Fotos da galeria com marca de canto (mesma linguagem dos diferenciais),
   em vez do simples border-radius das outras páginas. */
.property-hermes .property-gallery__item { position: relative; }
.property-hermes .property-gallery__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid var(--marfim);
  border-left: 1.5px solid var(--marfim);
  opacity: 0.85;
  pointer-events: none;
}

/* Ficha técnica — créditos rápidos (construtora etc.), mesmo padrão de
   grid leve usado no Afonso 1095 e no Therra Luna. */
.hm-credits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--grafite-12);
}
@media (min-width: 640px) { .hm-credits { grid-template-columns: repeat(3, 1fr); } }
.hm-credits div small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 4px;
}
.hm-credits div strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--grafite);
}