/* LK Imóveis, BIO PRIME
   A placa e a rua: a página abre como a placa da Av. Castelo Branco (grafite, monograma dourado,
   capitulares brancas) e desce para a luz do dia, onde ficam as casas, as pessoas e a loja.
   Ouro só marca ação de contato. */

:root {
  /* Cor */
  --grafite: #333333;          /* placa e avatar */
  --grafite-press: #3f3f3f;
  --ouro: #D0A050;             /* centro do monograma, só em ação */
  --ouro-press: #DDB46C;       /* press e hover clareiam: 6,5:1 com o texto */
  --reboco: #F1F0ED;           /* chão claro */
  --marfim: #F0F0F0;           /* letras IMÓVEIS */
  --nevoa: #66645F;            /* texto secundário no claro, 5,2:1 */
  --nevoa-placa: #B5B3AE;      /* texto secundário no grafite, 6:1 */
  --fio: rgba(51, 51, 51, 0.16);
  --fio-placa: rgba(240, 240, 240, 0.14);
  --foto-vazia: #DCDAD5;

  /* Tipo */
  --f-titulo: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --f-texto: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaço e forma */
  --gutter: 20px;
  --maxw: 560px;
  --cena: 56px;
  --r-foto: 6px;
  --r-botao: 12px;
  --r-ficha: 18px;

  /* Motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 420ms;
  --exibicao: 5200ms;          /* tempo de cada casa na vitrine */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --barra-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
    --motion-emphasis: 200ms;
    --motion-scene: 200ms;
  }
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--grafite);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--reboco);
  color: var(--grafite);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), var(--safe-left));
  padding-right: max(var(--gutter), var(--safe-right));
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--marfim);
  color: var(--grafite);
  border-radius: 8px;
  font-weight: 600;
}
.skip:focus { top: calc(12px + var(--safe-top)); }

:focus-visible {
  outline: 3px solid var(--grafite);
  outline-offset: 3px;
}

.titulo {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -0.005em;
}

.texto-apoio {
  margin-top: 8px;
  color: var(--nevoa);
  font-size: 16px;
}

.texto { font-size: 17px; max-width: 34em; }

/* Botões */
.btn-ouro,
.btn-grafite,
.btn-linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border-radius: var(--r-botao);
  font-family: var(--f-texto);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.btn-ouro {
  background: var(--ouro);
  color: var(--grafite);
  border: 0;
}
.btn-ouro i { font-size: 22px; }
.btn-ouro:active { background: var(--ouro-press); transform: scale(var(--press-scale)); }

.btn-grafite {
  background: var(--grafite);
  color: var(--marfim);
  border: 0;
}
.btn-grafite:active { background: var(--grafite-press); transform: scale(var(--press-scale)); }

.btn-linha {
  min-height: 52px;
  background: transparent;
  color: var(--grafite);
  border: 1.5px solid var(--grafite);
}
.btn-linha:active { background: rgba(51, 51, 51, 0.08); transform: scale(var(--press-scale)); }

/* Cena 1: placa */
.placa,
.intencoes {
  background: var(--grafite);
  color: var(--marfim);
}

.placa :focus-visible,
.intencoes :focus-visible,
.barra :focus-visible,
.ficha :focus-visible,
.rodape :focus-visible {
  outline-color: var(--ouro);
}

.placa {
  padding-top: calc(32px + var(--safe-top));
  padding-bottom: 36px;
}

.placa__marca {
  position: relative;
  display: block;
  width: min(76%, 300px);
}
.placa__marca img { width: 100%; height: auto; }

/* Reflexo: uma faixa de luz quente atravessa as letras uma vez, recortada pela máscara das próprias letras.
   Sem JavaScript e sem loop; parado, a faixa fica fora do logo. */
.placa__luz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url("img/marca-mascara.webp") center / 100% 100% no-repeat;
  mask: url("img/marca-mascara.webp") center / 100% 100% no-repeat;
}
.placa__luz::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(100deg,
    rgba(255, 246, 222, 0) 28%,
    rgba(255, 246, 222, 0.9) 50%,
    rgba(255, 246, 222, 0) 72%);
  transform: translateX(-110%);
}

/* A placa projeta sombra sobre o chão claro: o bloco grafite é um objeto, não uma faixa de cor. */
.intencoes {
  position: relative;
  z-index: 1;
  box-shadow: 0 26px 36px -30px rgba(20, 18, 16, 0.6);
}

.placa__creci {
  margin-top: 12px;
  color: var(--nevoa-placa);
  font-size: 14px;
}

.placa__titulo {
  margin-top: 40px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(32px, 8.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 13em;
}

.placa__texto {
  margin-top: 14px;
  color: var(--nevoa-placa);
  max-width: 30em;
}

.placa .btn-ouro { margin-top: 26px; }

.placa__nota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--nevoa-placa);
  font-size: 15px;
}
.placa__nota i { color: var(--marfim); }

/* Cena 2: intenções */
.intencoes { padding-bottom: 40px; }

/* Fio na largura do texto: separa a identidade do atendimento */
.intencoes .wrap::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 32px;
  background: var(--fio-placa);
}

.rotas { margin-top: 16px; }

.rota {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 14px 4px;
  border-top: 1px solid var(--fio-placa);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--motion-instant) var(--ease-standard);
}
.rotas li:last-child .rota { border-bottom: 1px solid var(--fio-placa); }
.rota:active { background: rgba(240, 240, 240, 0.06); }

.rota__texto { flex: 1; min-width: 0; }

.rota__titulo {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.rota__sub {
  display: block;
  margin-top: 2px;
  color: var(--nevoa-placa);
  font-size: 15px;
  line-height: 1.4;
}

.rota__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ouro);
  color: var(--grafite);
  font-size: 22px;
}

.rotas__nota {
  margin-top: 14px;
  color: var(--nevoa-placa);
  font-size: 14px;
}

/* Cena 3: vitrine */
.vitrine { padding-top: var(--cena); }

.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76%, 340px);
  gap: 16px;
  margin-top: 22px;
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding-bottom: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.trilho::-webkit-scrollbar { display: none; }

.trilho > li { scroll-snap-align: start; }

/* Apresentação automática: marcas no formato dos Stories, de onde a pessoa acabou de vir */
.exibicao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.exibicao[hidden] { display: none; }

.exibicao__marcas {
  flex: 1;
  display: flex;
  gap: 4px;
}

.exibicao__marca {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(51, 51, 51, 0.16);
  transition: background-color var(--motion-standard) var(--ease-standard);
}
.exibicao__marca.is-atual { background: rgba(51, 51, 51, 0.3); }

.exibicao__fill {
  display: block;
  height: 100%;
  background: var(--grafite);
  transform: scaleX(0);
  transform-origin: left center;
}
.exibicao__marca.is-vista .exibicao__fill { transform: scaleX(1); }

.exibicao__botao {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: -7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--grafite);
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.exibicao__botao::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--grafite);
  border-radius: 50%;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.exibicao__botao i { position: relative; }
.exibicao__botao:active::before { transform: scale(0.9); background: rgba(51, 51, 51, 0.08); }

.tem-exibicao .trilho { margin-top: 8px; }

.imovel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale var(--motion-fast) var(--ease-standard);
}
/* `scale` (e não transform) para somar com a profundidade da vitrine sem um anular o outro */
.imovel:active { scale: var(--press-scale); }
.imovel:focus-visible { outline-offset: 4px; border-radius: var(--r-foto); }

.imovel__foto,
.ficha__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--foto-vazia);
}
.imovel__foto { border-radius: var(--r-foto); }

.imovel__foto img,
.ficha__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Elemento assinatura: a etiqueta de chave com o número de referência, como no quadro de chaves da imobiliária */
.etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px 7px 23px;
  border-radius: 999px 5px 5px 999px;
  background: var(--grafite);
  color: var(--marfim);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* Relevo de etiqueta plástica: fio de luz em cima, fio de sombra embaixo */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-mask: radial-gradient(circle at 11px 50%, transparent 3.5px, #000 4px);
  mask: radial-gradient(circle at 11px 50%, transparent 3.5px, #000 4px);
}

.imovel__tipo {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.imovel__bairro {
  color: var(--nevoa);
  font-size: 15px;
}

.imovel__preco {
  margin-top: 8px;
  font-family: var(--f-titulo);
  font-size: 22px;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.imovel__resumo {
  margin-top: 4px;
  color: var(--nevoa);
  font-size: 15px;
}

/* Profundidade da vitrine: a casa em foco fica inteira, com luz e sombra; as vizinhas recuam e ficam na
   penumbra. É a posição no scroll nativo que conduz (sem listener, fora da main thread). Na cena em foco o
   cartão está a ~56% da linha do tempo em qualquer largura de celular; o vizinho que espia, a ~13%. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* O li não recebe transform: o scroll-snap mede a caixa transformada, e escalar o li
       desalinharia o encaixe. Ele só define a linha do tempo; quem recua é o cartão dentro dele. */
    .trilho > li { view-timeline: --cartao inline; }

    .imovel {
      position: relative;
      z-index: 0;
      transform-origin: 50% 32%;
      animation: lk-recuo linear both;
      animation-timeline: --cartao;
    }

    /* Sombra de contato só sob a casa em foco: a sombra marca o foco, não enfeita todos os cartões */
    .imovel::before {
      content: "";
      position: absolute;
      top: 0;
      left: 4%;
      right: 4%;
      aspect-ratio: 4 / 3;
      z-index: -1;
      border-radius: var(--r-foto);
      box-shadow: 0 26px 30px -22px rgba(38, 34, 28, 0.55);
      opacity: 0;
      animation: lk-sombra linear both;
      animation-timeline: --cartao;
    }

    .imovel__foto::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--grafite);
      opacity: 0;
      pointer-events: none;
      animation: lk-penumbra linear both;
      animation-timeline: --cartao;
    }
  }
}

@keyframes lk-recuo {
  0%        { transform: scale(0.88); }
  48%, 64%  { transform: none; }
  100%      { transform: scale(0.88); }
}
@keyframes lk-penumbra {
  0%        { opacity: 0.38; }
  48%, 64%  { opacity: 0; }
  100%      { opacity: 0.38; }
}
@keyframes lk-sombra {
  0%, 30%   { opacity: 0; }
  50%, 62%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}

.vitrine .btn-linha { margin-top: 26px; }

/* Cena 4: quem atende */
.time { padding-top: var(--cena); }

.time__foto {
  margin-top: 20px;
  border-radius: var(--r-foto);
  overflow: hidden;
  aspect-ratio: 760 / 691;
  background: var(--foto-vazia);
}
.time__foto img { width: 100%; height: 100%; object-fit: cover; }

.time .texto { margin-top: 18px; }

.depo {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 2px solid var(--grafite);
}
.depo p {
  font-family: var(--f-titulo);
  font-size: 20px;
  line-height: 1.45;
}
.depo footer {
  margin-top: 8px;
  color: var(--nevoa);
  font-size: 15px;
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.link:active { color: var(--nevoa); }

/* Cena 5: loja */
.loja { padding-top: var(--cena); }

.loja__quadro {
  position: relative;
  margin-top: 20px;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-foto);
  overflow: hidden;
  background: var(--foto-vazia);
}

.loja__fachada {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--motion-scene) var(--ease-standard);
}

.loja__mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-scene) var(--ease-standard),
    visibility 0s linear var(--motion-scene);
}

.loja__quadro.mostra-mapa.mapa-pronto .loja__mapa {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--motion-scene) var(--ease-standard),
    visibility 0s;
}
.loja__quadro.mostra-mapa.mapa-pronto .loja__fachada { opacity: 0; }
.loja__quadro.mostra-mapa:not(.mapa-pronto) .loja__fachada { opacity: 0.55; }

.loja__endereco {
  margin-top: 18px;
  font-style: normal;
  font-size: 17px;
}

.loja__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.loja__acoes .btn-grafite,
.loja__acoes .btn-linha { min-height: 52px; padding: 0 12px; font-size: 16px; }

/* Cena 6: canais */
.canais { padding-top: var(--cena); padding-bottom: var(--cena); }

.lista { margin-top: 14px; }

.item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 4px;
  border-top: 1px solid var(--fio);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--motion-instant) var(--ease-standard);
}
.lista li:last-child .item { border-bottom: 1px solid var(--fio); }
.item:active { background: rgba(51, 51, 51, 0.06); }

.item__icone {
  flex: none;
  width: 24px;
  font-size: 20px;
  text-align: center;
}

.item__texto { min-width: 0; }

.item__titulo {
  display: block;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.item__sub {
  display: block;
  color: var(--nevoa);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Rodapé */
.rodape {
  background: var(--grafite);
  color: var(--nevoa-placa);
  font-size: 14px;
  padding-top: 28px;
  padding-bottom: calc(28px + var(--barra-h) + var(--safe-bottom));
}
.rodape p + p { margin-top: 4px; }

/* Barra fixa de WhatsApp */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px max(16px, var(--safe-right)) calc(10px + var(--safe-bottom)) max(16px, var(--safe-left));
  background: rgba(51, 51, 51, 0.97);
  border-top: 1px solid var(--fio-placa);
  box-shadow: 0 -14px 28px -20px rgba(20, 18, 16, 0.45);   /* camada acima do conteúdo */
}

.btn-ouro--barra {
  display: flex;
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  min-height: 54px;
  margin-inline: auto;
}

.js .barra {
  visibility: hidden;
  transform: translateY(calc(100% + 1px));
  transition:
    transform var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard);
}

.js .barra.is-on {
  visibility: visible;
  transform: none;
  transition:
    transform var(--motion-emphasis) var(--ease-enter),
    visibility 0s;
}

/* Ficha do imóvel */
.ficha {
  width: 100%;
  max-width: var(--maxw);
  max-height: 92vh;
  max-height: 92svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-ficha) var(--r-ficha) 0 0;
  background: var(--grafite);
  color: var(--marfim);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ficha::backdrop { background: rgba(24, 24, 24, 0.6); }

.ficha[open] { animation: ficha-sobe var(--motion-emphasis) var(--ease-enter); }
.ficha[open]::backdrop { animation: aparece var(--motion-emphasis) var(--ease-standard); }

/* Durante a expansão com View Transition, a foto faz a continuidade; o resto só entra por crossfade. */
.is-morphing .ficha[open],
.is-morphing .ficha[open]::backdrop { animation: none; }

html:has(.ficha[open]) { overflow: hidden; }

@keyframes ficha-sobe { from { transform: translateY(100%); } }
@keyframes aparece { from { opacity: 0; } }

.ficha__corpo { position: relative; }

/* A foto da ficha é a alça: arrastar para baixo fecha, como em qualquer painel de celular */
.ficha__foto { touch-action: none; }

.ficha__alca {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: rgba(240, 240, 240, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.ficha__fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.9);
  color: var(--marfim);
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.ficha__fechar:active { transform: scale(0.92); }

.ficha__info {
  padding: 22px var(--gutter) 8px;
}

.ficha__acao {
  position: sticky;
  bottom: 0;
  padding: 12px var(--gutter) calc(12px + var(--safe-bottom));
  background: var(--grafite);
  border-top: 1px solid var(--fio-placa);
}

.ficha__titulo {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
}

.ficha__bairro {
  margin-top: 2px;
  color: var(--nevoa-placa);
  font-size: 16px;
}

.ficha__preco {
  margin-top: 12px;
  font-family: var(--f-titulo);
  font-size: 26px;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.ficha__selo {
  margin-top: 4px;
  color: var(--nevoa-placa);
  font-size: 15px;
}
.ficha__selo:empty { display: none; }

.ficha__lista { margin: 18px 0 4px; }
.ficha__lista li {
  padding: 11px 0;
  border-top: 1px solid var(--fio-placa);
  font-size: 16px;
}
.ficha__lista li:last-child { border-bottom: 1px solid var(--fio-placa); }

.ficha__site {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 8px;
  color: var(--marfim);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.ficha__site:active { color: var(--nevoa-placa); }

::view-transition-group(lk-foto) {
  animation-duration: var(--motion-emphasis);
  animation-timing-function: var(--ease-emphasis);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-standard);
}

/* Aviso só para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Estado "abrindo": no navegador do Instagram o WhatsApp e o Maps demoram a abrir.
   O rótulo confirma o toque para a pessoa não tocar de novo. */
.rota.is-abrindo .rota__sub { color: var(--marfim); }

/* Luz, profundidade e microestados: só com movimento liberado */
@media (prefers-reduced-motion: no-preference) {
  .placa__luz::before {
    animation: lk-reflexo 800ms var(--ease-standard) 400ms 1 both;
  }

  .btn-ouro.is-abrindo i,
  .btn-grafite.is-abrindo i,
  .rota.is-abrindo .rota__icone i {
    animation: lk-envia 380ms var(--ease-standard);
  }

  .exibicao__botao.is-trocou i {
    animation: lk-surge var(--motion-fast) var(--ease-enter);
  }
}

/* Janela: as fotos de gente e de lugar andam um pouco mais devagar que o quadro, como vistas por uma
   abertura. Uma camada, 3%, conduzida pelo scroll nativo. Sem suporte, a foto fica parada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .time__foto img,
    .loja__fachada {
      animation: lk-janela linear both;
      animation-timeline: view();
    }
    .loja__fachada { transform-origin: 80% 50%; }   /* protege a placa, que fica na borda direita da foto */
  }
}

@keyframes lk-reflexo {
  from { transform: translateX(-110%); }
  to   { transform: translateX(175%); }
}
@keyframes lk-envia {
  45% { transform: translateX(4px); }
}
@keyframes lk-surge {
  from { transform: scale(0.5); opacity: 0; }
}
@keyframes lk-janela {
  from { transform: translateY(-3%) scale(1.07); }
  to   { transform: translateY(3%) scale(1.07); }
}

/* Telas maiores: a mesma página, com a ficha centralizada */
@media (min-width: 600px) {
  :root { --gutter: 24px; --cena: 72px; }

  .ficha__alca { display: none; }
  .ficha__foto { touch-action: auto; }

  .ficha {
    margin: auto;
    max-height: min(88vh, 860px);
    border-radius: var(--r-ficha);
  }
  .ficha[open] { animation-name: aparece; }

  .trilho { scrollbar-width: thin; scrollbar-color: var(--nevoa) transparent; }
  .trilho::-webkit-scrollbar { display: block; height: 6px; }
  .trilho::-webkit-scrollbar-thumb { background: var(--nevoa); border-radius: 3px; }
}

@media (hover: hover) and (pointer: fine) {
  .btn-ouro:hover { background: var(--ouro-press); }
  .btn-grafite:hover { background: var(--grafite-press); }
  .btn-linha:hover { background: rgba(51, 51, 51, 0.06); }
  .rota:hover { background: rgba(240, 240, 240, 0.05); }
  .item:hover { background: rgba(51, 51, 51, 0.05); }
  .imovel:hover .imovel__tipo { text-decoration: underline; text-underline-offset: 3px; }
}

/* Movimento reduzido: sem deslocamento nem escala, só troca de estado por fade */
@media (prefers-reduced-motion: reduce) {
  .ficha[open] { animation-name: aparece; }

  .js .barra,
  .js .barra.is-on {
    transform: none;
    opacity: 0;
    transition: opacity var(--motion-standard) var(--ease-standard), visibility 0s linear var(--motion-standard);
  }
  .js .barra.is-on {
    opacity: 1;
    transition: opacity var(--motion-standard) var(--ease-standard), visibility 0s;
  }

  .ficha__fechar:active { transform: none; }
}