/* ==========================================================================
   ELAS CORRETORAS — Skin exclusivo: EDIFÍCIO LOURDES LAMARTINE
   Camada visual aplicada SOBRE tokens.css + base.css + property.css.
   Não redefine a marca — a atmosfera da página ecoa a fachada do próprio
   edifício e a foto de capa (retrato de entardecer, portão preto em
   primeiro plano, faixa vertical mustard/dourada na torre): mood quente,
   "golden hour", diferente do travertino/latão do Afonso 1095 e das
   faixas horizontais preto/branco do Graciliano Ramos.
   Composição própria: sem recorte flutuante (Afonso) e sem textura de
   linhas horizontais (Graciliano) — aqui o motivo recorrente é uma régua
   vertical dourada, eco direto da faixa mustard da torre. Diferenciais em
   cartão claro com borda dourada à esquerda (não invertido em grafite
   como no Graciliano, não em pedra como no Afonso). Sem seção de planta
   (não há planta baixa disponível para este imóvel ainda). Vídeo
   posicionado perto do fim, entre Localização e Ficha técnica — posição
   diferente das outras duas páginas.
   Escopo: tudo dentro de body.property-lla.
   ========================================================================== */

.property-lla {
  --lla-gold: #C79A44;
  --lla-gold-soft: rgba(199,154,68,0.14);
}

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

/* Lavagem quente suave nas seções claras — eco do entardecer da capa,
   sem imitar mármore/tecido/linhas dos outros dois imóveis. */
.property-lla .section:not(.section--dark) {
  background: linear-gradient(180deg, var(--lla-gold-soft) 0%, transparent 220px);
}

/* Régua vertical dourada ao lado do título do hero — motivo próprio deste
   imóvel, eco direto da faixa mustard vertical da torre na foto de capa. */
.property-lla .property-hero-full__content {
  padding-left: var(--space-5);
  border-left: 3px solid var(--lla-gold);
}
.property-lla .property-hero-full__content .eyebrow { color: var(--areia); }
.property-lla .property-hero-full__content .eyebrow::after { background: var(--lla-gold); }

/* Overlay quente no hero para legibilidade do texto sobre a foto de
   entardecer (céu claro atrás do texto) — degradê esquerda→direita como
   nas outras páginas de imóvel, só que mais sutil (a foto já é escura o
   bastante do lado direito, onde fica a torre). */
.property-lla .property-hero-full__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(32,33,31,0.80) 0%,
    rgba(32,33,31,0.60) 28%,
    rgba(32,33,31,0.32) 50%,
    rgba(32,33,31,0.12) 70%,
    rgba(32,33,31,0.02) 100%);
}

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

/* Diferenciais: cartão claro com aba dourada à esquerda — nem inversão
   grafite (Graciliano), nem cartão-pedra (Afonso). */
.property-lla .diferenciais-grid { gap: var(--space-3); }
.property-lla .diferencial-item {
  background: var(--marfim);
  border: 1px solid var(--grafite-12);
  border-left: 3px solid var(--lla-gold);
  border-radius: var(--radius-md);
}
.property-lla .diferencial-item .icon { color: var(--lla-gold); }
.property-lla .diferencial-item h3 { color: var(--grafite); }
.property-lla .diferencial-item p { color: var(--cinza-tecnico); }

/* Frase de abertura editorial */
.lla-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--grafite);
  max-width: 46ch;
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

/* Abas da galeria — pílulas douradas, diferente do bloco retangular
   grafite do Graciliano. */
.lla-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.lla-tab-buttons {
  display: inline-flex;
  gap: 6px;
  background: var(--areia);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: var(--space-4);
  width: fit-content;
}
.lla-tab-buttons button {
  border: none;
  background: transparent;
  padding: 10px 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cinza-tecnico);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lla-tab-buttons button.is-active { background: var(--lla-gold); color: var(--grafite); }
.lla-tab-panel { display: none; }
.lla-tab-panel.is-active { display: block; }
.lla-tab-panel img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--grafite-12);
}

/* Créditos rápidos (bairro / vagas / entrega) na ficha técnica */
.lla-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) { .lla-credits { grid-template-columns: repeat(3, 1fr); } }
.lla-credits div small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 4px;
}
.lla-credits div strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--grafite);
}