/* Página /links (bio do Instagram): capa fotográfica, links em linhas finas, imóveis em carrossel com movimento. */
.pagina-links { min-height: 100svh; background: var(--noite); color: #f5f3ee; }
.links { max-width: 520px; margin: 0 auto; min-height: 100svh; background: var(--noite); box-shadow: 0 0 89px rgb(0 0 0 / 0.35); }

/* ================= capa ================= */
.links-capa { position: relative; height: min(68svh, 560px); min-height: 420px; overflow: hidden; isolation: isolate; }
.links-capa-foto { position: absolute; inset: 0; background: var(--noite-2); will-change: transform; }
.links-capa-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.pronto .links-capa-foto img { animation: aproximar-capa 14s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; }
@keyframes aproximar-capa { to { transform: scale(1.02); } }
.links-capa::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(12 23 38 / 0.35) 0%, rgb(12 23 38 / 0) 30%),
    linear-gradient(0deg, var(--noite) 0%, rgb(12 23 38 / 0.85) 28%, rgb(12 23 38 / 0) 62%);
}
.links-capa-texto {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: center; gap: var(--e1); text-align: center;
  padding: 0 var(--e4) var(--e4);
}
.links-capa-texto > * { opacity: 0; transform: translateY(var(--e3)); }
.pronto .links-capa-texto > * { animation: subir-links 1s var(--ease) forwards; }
.pronto .links-capa-texto > :nth-child(2) { animation-delay: 0.12s; }
.pronto .links-capa-texto > :nth-child(3) { animation-delay: 0.22s; }
.pronto .links-capa-texto > :nth-child(4) { animation-delay: 0.34s; }
@keyframes subir-links { to { opacity: 1; transform: none; } }
.links-mono { width: 56px; height: 56px; color: #f5f3ee; margin-bottom: var(--e1); }
.links-mono .mono-ponto { transform: translateY(-30px) scale(0); }
.pronto .links-mono .mono-ponto { animation: pingar 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; }
@keyframes pingar { to { transform: none; } }
.links-nome { font: 300 var(--t-xl)/1 var(--f-texto); letter-spacing: 0.01em; }
.links-nome b { font-weight: 600; }
.links-sub { font-size: var(--t-xs); letter-spacing: 0.04em; color: rgb(245 243 238 / 0.72); }
.links-sub i { font-style: normal; opacity: 0.5; }
.links-chamada { margin-top: var(--e1); max-width: 28ch; font: italic 400 var(--t-lg)/1.382 var(--f-display); color: rgb(245 243 238 / 0.9); }
.links-chamada:empty { display: none; }

/* ================= links em linhas ================= */
.links-corpo { display: grid; gap: var(--e5); padding: var(--e3) var(--e3) calc(var(--e5) + env(safe-area-inset-bottom)); }
.links-lista { display: grid; border-top: 1px solid rgb(245 243 238 / 0.1); }
.link-linha {
  position: relative; display: flex; align-items: center; gap: var(--e2);
  width: 100%; padding: var(--e3) 0; border: 0; border-bottom: 1px solid rgb(245 243 238 / 0.1);
  background: none; color: #f5f3ee; text-align: left; text-decoration: none; cursor: pointer;
  opacity: 0; transform: translateX(-12px);
}
.pronto .link-linha { animation: entrar-linha 0.9s var(--ease) forwards; animation-delay: calc(0.45s + var(--n, 0) * 90ms); }
@keyframes entrar-linha { to { opacity: 1; transform: none; } }
/* linha dourada que corre por baixo no toque/hover */
.link-linha::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.link-ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  color: var(--ouro); box-shadow: inset 0 0 0 1px rgb(217 182 93 / 0.45);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link-ico svg { width: 18px; height: 18px; }
.link-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.link-txt strong { font: 400 1.125rem/1.3 var(--f-display); }
.link-txt small { font-size: var(--t-xs); color: rgb(245 243 238 / 0.55); }
.link-linha--destaque .link-txt strong::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 0.35em; border-radius: 50%; background: var(--ouro); }
.links-seta { width: 18px; height: 18px; flex: none; opacity: 0.45; transition: transform 0.5s var(--ease), opacity 0.3s; }
.link-linha:active::after, .link-linha:focus-visible::after { transform: scaleX(1); }
.link-linha:active .link-ico { background: var(--ouro); color: var(--noite); }
.link-linha:focus-visible { outline: none; }
@media (hover: hover) {
  .link-linha:hover::after { transform: scaleX(1); }
  .link-linha:hover .link-ico { background: var(--ouro); color: var(--noite); }
  .link-linha:hover .links-seta { transform: translateX(6px); opacity: 1; }
}

/* ================= imóveis em destaque ================= */
.links-imoveis { display: grid; gap: var(--e2); }
.links-secao { display: flex; align-items: baseline; justify-content: space-between; }
.links-secao h2 { font: 500 var(--t-xs) var(--f-texto); letter-spacing: 0.2em; text-transform: uppercase; color: rgb(245 243 238 / 0.6); }
.links-secao a { font-size: var(--t-xs); color: rgb(245 243 238 / 0.8); }
.links-trilho {
  display: flex; gap: var(--e2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--e3)); padding: 0 var(--e3); scroll-padding-inline: var(--e3);
}
.links-trilho::-webkit-scrollbar { display: none; }
.links-imovel {
  position: relative; flex: 0 0 72%; aspect-ratio: 1 / 1.272; overflow: hidden; scroll-snap-align: start;
  color: #f5f3ee; text-decoration: none; background: var(--noite-2);
  opacity: 0.55; transform: scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.links-imovel.ativo { opacity: 1; transform: none; }
.links-imovel .foto { position: absolute; inset: 0; background: var(--noite-2); }
.links-imovel img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 6s cubic-bezier(0.2, 0.6, 0.2, 1); }
.links-imovel.ativo img { transform: scale(1); }
.links-imovel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(12 23 38 / 0.92) 0%, rgb(12 23 38 / 0.2) 50%, rgb(12 23 38 / 0) 70%); }
.links-imovel-info { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: var(--e3); transform: translateY(var(--e2)); opacity: 0.6; transition: transform 0.8s var(--ease) 0.1s, opacity 0.8s var(--ease) 0.1s; }
.links-imovel.ativo .links-imovel-info { transform: none; opacity: 1; }
.links-imovel-info small { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(245 243 238 / 0.7); }
.links-imovel-info strong { font: 400 1.25rem/1.25 var(--f-display); }
.links-imovel-info span { font-size: var(--t-xs); color: rgb(245 243 238 / 0.7); }
.links-imovel-info b { margin-top: 4px; font-weight: 500; font-size: var(--t-sm); }
.links-imovel:active { transform: scale(0.97); }
/* barras de progresso do carrossel, como os stories da capa do site */
.links-barras { display: flex; gap: 4px; }
.links-barras span { position: relative; flex: 1; height: 2px; background: rgb(245 243 238 / 0.18); overflow: hidden; }
.links-barras span::after { content: ''; position: absolute; inset: 0; background: var(--ouro); transform: scaleX(0); transform-origin: left; }
.links-barras span.feita::after { transform: scaleX(1); }
.links-barras span.ativa::after { animation: encher-links var(--duracao, 4.5s) linear forwards; }
.links-barras.parado span.ativa::after { animation: none; transform: scaleX(1); }
@keyframes encher-links { to { transform: scaleX(1); } }

/* ================= redes e rodapé ================= */
.links-redes { justify-content: center; margin: 0; }
.links-rodape { text-align: center; font-size: var(--t-xs); color: rgb(245 243 238 / 0.45); }
.links-rodape a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .link-linha, .links-capa-texto > * { opacity: 1; transform: none; animation: none !important; }
  .links-mono .mono-ponto { transform: none; }
  .links-imovel { opacity: 1; transform: none; }
}