.pagina-links { --mar: #4a9bd9; min-height: 100vh; min-height: 100dvh; }
.lk { width: min(100%, 480px); margin-inline: auto; padding: 0 16px 40px; }

.lk-foto { position: relative; margin-inline: -16px; background: var(--card); }
.lk-foto > img:first-child { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 24%; }
.lk-topo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-inline: -16px; padding: 12px 0; background: var(--bg); }
.lk-ass { height: 60px; width: auto; }
.lk-logo { height: 50px; width: 50px; padding: 6px 8px; box-sizing: border-box; background: rgba(233, 231, 218, .9); object-fit: contain; }
.lk-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 2%, rgba(16, 19, 13, 0) 48%); }

.lk-cab { position: relative; z-index: 1; margin-top: -84px; text-align: center; }
.lk-cab h1 { font: 900 clamp(3rem, 15vw, 4.4rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.lk-cab p { color: var(--muted); max-width: 30ch; margin: 10px auto 0; }

.lk-ep { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 28px; padding: 14px; background: var(--mar-fundo); border-top: 3px solid var(--osso); }
.lk-ep img { width: 132px; height: 132px; object-fit: cover; }
.lk-ep h2 { font: 800 1.7rem/1 var(--display); text-transform: uppercase; }
.lk-ep p { color: var(--muted); font-size: .92rem; margin: 4px 0 0; }
.lk-ep p span { white-space: nowrap; }
.lk-mini { grid-column: 1 / -1; display: block; text-align: center; padding: 14px 16px; background: var(--osso); color: var(--bg); font: 600 .9rem/1.2 var(--body); text-decoration: none; transition: background .2s; }
@media (hover: hover) { .lk-mini:hover { background: #f6f4ea; } }

.lk-lista { margin-top: 24px; }
.lk-btn {
  --b: var(--olive); --f: var(--olive);
  display: block; padding: 17px 20px; margin-top: 10px; border: 2px solid var(--b);
  text-align: center; text-decoration: none; font: 600 1.05rem/1.25 var(--body); color: var(--text);
  background: linear-gradient(var(--f), var(--f)) no-repeat 0 0 / 0 100%;
  transition: background-size .38s var(--ease), color .2s, border-color .2s;
}
.lk-btn:first-child { margin-top: 0; }
@media (hover: hover) { .lk-btn:hover { background-size: 100% 100%; color: var(--bg); } }
.lk-btn-cheio { --f: var(--olive-hi); background-color: var(--olive); color: var(--bg); }
@media (hover: hover) { .lk-btn-cheio:hover { border-color: var(--olive-hi); } }
.lk-btn-areia { --b: var(--osso); --f: #f6f4ea; background-color: var(--osso); color: var(--bg); }

.lk-redes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.lk-redes a { display: block; padding: 11px 4px; border: 1px solid var(--line); text-align: center; text-decoration: none; color: var(--muted); font-size: .85rem; font-weight: 500; transition: color .2s, border-color .2s, background .2s; }
@media (hover: hover) { .lk-redes a:hover { color: var(--text); border-color: var(--osso); background: var(--card); } }

.lk-compartilhar { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 .9rem/1.2 var(--body); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
@media (hover: hover) { .lk-compartilhar:hover { color: var(--text); border-color: var(--osso); background: var(--card); } }

.lk-rodape { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 32px; color: var(--muted); font-size: .85rem; }
.lk-rodape a { color: var(--muted); }
@media (hover: hover) { .lk-rodape a:hover { color: var(--text); } }

@media (min-width: 640px) {
  .lk { padding-top: 32px; }
  .lk-foto { margin-inline: 0; overflow: hidden; }
}
