/* Página de links do Instagram · SibeleCrafts (decisões 95 e 96).
   Cores da identidade visual (Id-Visual-SIBELE-ATELIE-V2): #E9E6E1, #E0D9D0, #CBB198, #BCB5AD, #AB8B6D.
   O botão principal usa a castanha um tom abaixo (#8A6C50), para o texto branco ler bem (contraste 4,8).
   Grafite só no texto. Nada abaixo de 14 px; toques de no mínimo 44 px. */

@font-face {
  font-family: "Inter";
  src: url("/l/fontes/inter.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/l/fontes/source-serif-4-italico.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --marfim: #e9e6e1;
  --areia: #e0d9d0;
  --caramelo: #cbb198;
  --pedra: #bcb5ad;
  --castanha: #ab8b6d;
  --castanha-escura: #8a6c50;
  --castanha-funda: #765b43;
  --grafite: #3a3530;
  --grafite-suave: #625b53;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --margem: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--marfim); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 70% at 50% 0%, #f7f5f2 0%, rgba(247, 245, 242, 0) 70%),
    linear-gradient(180deg, var(--marfim) 0%, var(--areia) 100%);
  background-attachment: fixed;
  color: var(--grafite);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--castanha-escura); outline-offset: 3px; }

.links {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* ---------- Cabeça ---------- */

.cabeca { padding: 44px 0 32px; text-align: center; }
.selo {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; margin: 0 auto; border-radius: 50%;
  background: var(--caramelo); color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55);
}
.selo svg { display: block; width: 58px; height: 58px; }
.nome { margin: 22px 0 0; font-weight: 300; font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }
.sub {
  margin: 2px 0 0;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 30px; color: var(--castanha-escura);
}
.frase { margin: 16px auto 0; max-width: 330px; font-size: 16px; line-height: 25px; color: var(--grafite-suave); }

/* ---------- Botões ---------- */

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.botao {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 14px 22px 14px 26px;
  border: 1px solid var(--caramelo); border-radius: 999px;
  background: rgba(255, 255, 255, 0.72); color: var(--grafite);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.botao:hover { background: #ffffff; border-color: var(--castanha); }
.botao.principal {
  background: var(--castanha-escura); border-color: var(--castanha-escura); color: #ffffff;
  box-shadow: 0 8px 20px -10px rgba(118, 91, 67, 0.55);
}
.botao.principal:hover { background: var(--castanha-funda); border-color: var(--castanha-funda); }
.botao-texto { display: flex; flex-direction: column; gap: 2px; }
.botao-titulo { font-size: 16px; font-weight: 500; letter-spacing: 0.01em; line-height: 22px; }
.botao-apoio { font-size: 14px; line-height: 20px; color: var(--grafite-suave); }
.principal .botao-apoio { color: rgba(255, 255, 255, 0.86); }
.botao svg { flex-shrink: 0; }

/* ---------- Fotos ---------- */

.atelie { margin-top: 36px; }
.atelie-titulo { margin: 0 0 12px; text-align: center; font-size: 14px; letter-spacing: 0.02em; color: var(--grafite-suave); }
.fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fotos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; background: var(--areia); }

/* ---------- Rodapé ---------- */

.rodape {
  margin-top: auto; padding: 36px 0 28px;
  text-align: center; font-size: 14px; line-height: 22px; color: var(--grafite-suave);
}

@media (min-width: 768px) {
  .cabeca { padding-top: 80px; }
}