/* =========================================================
   ALINE REBEKA — página de links (bio do Instagram)
   Folha própria e completa: esta página não carrega o style.css,
   porque o valor dela é abrir rápido no telemóvel.
   ========================================================= */

:root {
  --oliva:            #55634D;
  --salvia:           #A8B39A;
  --terracota:        #C67E5A;
  --areia:            #E9E2D6;
  --offwhite:         #F6F4F1;
  --grafite:          #333333;
  --oliva-escuro:     #3E4939;
  --oliva-profundo:   #2F382B;
  --terracota-forte:  #A45C39;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --raio:  4px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* a coluna é curta: centrar verticalmente evita o vão morto embaixo.
     A centragem é pela margem automática do filho, não por `align-items`
     — com `center`, conteúdo mais alto que a janela sangra para cima e
     fica fora de alcance da rolagem. */
  min-height: 100svh;
  display: flex;
  background: var(--oliva-profundo);
  color: var(--offwhite);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* =========================================================
   FUNDO
   ========================================================= */
.lk-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--oliva-profundo);
}
.lk-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  /* a foto é textura, não assunto: fica quase invisível sob os véus */
  filter: brightness(.34) saturate(.55) blur(3px);
  transform: scale(1.08);
}
.lk-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%,   rgba(168, 179, 154, .20) 0%, rgba(168, 179, 154, 0) 70%),
    radial-gradient(60% 45% at 12% 82%,  rgba(198, 126, 90, .18)  0%, rgba(198, 126, 90, 0)  72%),
    linear-gradient(180deg, rgba(30, 37, 26, .58) 0%, rgba(30, 37, 26, .78) 55%, rgba(24, 30, 21, .94) 100%);
}

/* dois halos que respiram devagar, para a página não ficar parada */
.lk-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  pointer-events: none;
}
.lk-halo--a {
  width: 380px; height: 380px;
  top: -110px; left: -90px;
  background: radial-gradient(circle, rgba(168, 179, 154, .55), rgba(168, 179, 154, 0) 70%);
  animation: lk-vaga 19s ease-in-out infinite alternate;
}
.lk-halo--b {
  width: 320px; height: 320px;
  right: -100px; bottom: -80px;
  background: radial-gradient(circle, rgba(198, 126, 90, .5), rgba(198, 126, 90, 0) 70%);
  animation: lk-vaga 24s ease-in-out infinite alternate-reverse;
}
@keyframes lk-vaga {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(26px, -34px, 0) scale(1.16); }
}

/* =========================================================
   COLUNA
   ========================================================= */
.lk-pagina {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  min-width: 0;
  margin: auto;
  padding: clamp(34px, 8vw, 56px) clamp(20px, 6vw, 28px) 40px;
}

/* ---------- topo ---------- */
.lk-topo { text-align: center; }

.lk-marca img {
  width: 168px;
  margin: 0 auto clamp(26px, 5vw, 34px);
  opacity: .92;
}

.lk-avatar {
  position: relative;
  width: 134px;
  height: 134px;
  margin: 0 auto 20px;
}
.lk-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(246, 244, 241, .9);
}

.lk-nome {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
}
.lk-papel {
  margin: 8px 0 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--salvia);
}
.lk-frase {
  margin: 16px auto 0;
  max-width: 32ch;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-style: italic;
  line-height: 1.4;
  color: rgba(246, 244, 241, .9);
}
.lk-onde {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(246, 244, 241, .68);
}

/* fio entre o topo e os links */
.lk-fio {
  width: 46px;
  height: 1px;
  margin: clamp(26px, 5vw, 34px) auto;
  background: linear-gradient(90deg, transparent, var(--salvia), transparent);
}

/* =========================================================
   LINKS
   ========================================================= */
/* minmax(0,1fr): sem isso o `min-width:auto` da grelha deixa a coluna
   crescer até o max-content do título e a página sangra para a direita */
.lk-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.lk-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  border: 1px solid rgba(246, 244, 241, .16);
  border-radius: 14px;
  background: rgba(246, 244, 241, .07);
  text-decoration: none;
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1),
              background-color .3s ease, border-color .3s ease;
}
/* brilho que atravessa o cartão no toque/hover */
.lk-link::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(246, 244, 241, .13), transparent);
  transform: skewX(-16deg);
  transition: left .65s cubic-bezier(.2, .7, .2, 1);
}
.lk-link:hover, .lk-link:focus-visible {
  background: rgba(246, 244, 241, .13);
  border-color: rgba(246, 244, 241, .34);
  transform: translateY(-2px);
  outline: none;
}
.lk-link:hover::after, .lk-link:focus-visible::after { left: 115%; }
.lk-link:active { transform: translateY(0) scale(.99); }

.lk-link__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(168, 179, 154, .18);
  color: var(--salvia);
  transition: background-color .3s ease, color .3s ease;
}
.lk-link:hover .lk-link__icone { background: rgba(168, 179, 154, .3); color: var(--offwhite); }
.lk-link__icone svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.lk-link__texto { min-width: 0; flex: 1; }
.lk-link__texto b {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}
.lk-link__texto > span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(246, 244, 241, .62);
}

.lk-link__seta {
  flex: none;
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: rgba(246, 244, 241, .45);
  transition: transform .3s ease, color .3s ease;
}
.lk-link:hover .lk-link__seta { transform: translateX(4px); color: var(--offwhite); }

/* o cartão em destaque */
.lk-link--destaque {
  background: linear-gradient(135deg, var(--terracota-forte), #b96b44);
  border-color: transparent;
}
.lk-link--destaque:hover, .lk-link--destaque:focus-visible {
  background: linear-gradient(135deg, #b3663f, var(--terracota));
  border-color: transparent;
}
.lk-link--destaque .lk-link__icone { background: rgba(255, 255, 255, .2); color: #fff; }
.lk-link--destaque .lk-link__texto span { color: rgba(255, 255, 255, .78); }
.lk-link--destaque .lk-link__seta { color: rgba(255, 255, 255, .7); }

/* etiqueta de preço, depois da descrição: título → o que é → quanto custa.
   Seletor com dois níveis porque `.lk-link__texto > span` (0,1,1) vence
   uma classe solta e apagaria a cor e o `display` daqui. */
.lk-selo,
.lk-link__texto > .lk-selo {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 9px;
  border-radius: 40px;
  background: rgba(168, 179, 154, .22);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salvia);
  white-space: nowrap;
}
.lk-link--destaque .lk-selo { background: rgba(255, 255, 255, .22); color: #fff; }

/* =========================================================
   CONTATO E PARTILHA
   ========================================================= */
.lk-acoes {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 22px;
}
.lk-whats, .lk-copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 20px;
  border: 1px solid rgba(246, 244, 241, .28);
  border-radius: 40px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.lk-whats svg, .lk-copiar svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.lk-whats:hover, .lk-whats:focus-visible,
.lk-copiar:hover, .lk-copiar:focus-visible {
  background: var(--offwhite);
  border-color: var(--offwhite);
  color: var(--oliva-profundo);
  outline: none;
}
.lk-copiar { padding-inline: 18px; }
.lk-copiar span { display: none; }

/* aviso de "copiado" */
.lk-aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  padding: 11px 20px;
  border-radius: 40px;
  background: var(--offwhite);
  color: var(--oliva-profundo);
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(16, 20, 14, .4);
  transform: translate(-50%, 18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.lk-aviso.is-visivel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.lk-pe {
  margin-top: clamp(34px, 7vw, 48px);
  text-align: center;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 244, 241, .42);
}
.lk-pe a { text-decoration: none; transition: color .25s ease; }
.lk-pe a:hover { color: var(--offwhite); }

/* =========================================================
   ENTRADA
   ========================================================= */
.lk-sobe { opacity: 0; transform: translateY(14px); }
.lk-pronto .lk-sobe {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease var(--atraso, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .lk-sobe { opacity: 1; transform: none; transition: none; }
  .lk-halo--a, .lk-halo--b { animation: none; }
  .lk-link::after { display: none; }
}

/* ---------- telas maiores ---------- */
@media (min-width: 560px) {
  .lk-copiar span { display: inline; }
}

/* =========================================================
   RETRATO COM DEGRADÊ
   Substituiu o avatar redondo: a foto ocupa a coluna inteira
   e some para baixo num degradê, com o nome assente sobre ele.
   ========================================================= */
.lk-retrato {
  position: relative;
  isolation: isolate;
  margin: 0 auto clamp(18px, 4vw, 24px);
  border-radius: 14px;
  overflow: hidden;
  /* 4/5 é a proporção do ficheiro: sem recorte, a Aline cabe inteira */
  aspect-ratio: 4 / 5;
  background: var(--oliva-escuro);
}
/* O ficheiro já vem cortado em 4:5, igual à caixa: não há recorte a
   fazer aqui, e por isso a âncora é o centro. */
.lk-retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* O degradê é o próprio fundo da página a subir por cima da foto:
   assim ela não termina numa borda, dissolve-se. */
.lk-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(24, 30, 21, 0)   0%,
    rgba(24, 30, 21, .08) 40%,
    rgba(24, 30, 21, .62) 72%,
    rgba(24, 30, 21, .93) 100%);
}
.lk-retrato__dados {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 0 clamp(18px, 5vw, 26px) clamp(18px, 5vw, 24px);
  text-align: center;
}
.lk-retrato__dados .lk-nome {
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.lk-retrato__dados .lk-papel {
  margin-top: 6px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}