/* ============================================================================
 * Link da bio · Tout Lissie
 * ----------------------------------------------------------------------------
 * Paleta tirada do site da loja: rosa #FF6A9C, verde de apoio #108474, fundo
 * escuro #170C11. Tipografia igual à da loja: Playfair Display no nome,
 * Poppins no resto.
 *
 * A página é feita para celular segurado numa mão: alvo de toque alto, texto
 * que não precisa de zoom, e nada que role sem necessidade.
 * ========================================================================== */

:root {
  --rosa:        #FF6A9C;
  --rosa-forte:  #C9285F;
  --rosa-funda:  #A81F4D;
  --rosa-tenue:  #FFE8F0;
  --verde:       #108474;   /* o mesmo verde de apoio da loja, usado no WhatsApp */
  --funda:       #170C11;
  --papel:       #FFFFFF;
  --tinta:       #1A1A1A;
  --tinta-2:     #4A4A4A;
  --tinta-3:     #B9A9B0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  padding: 36px 18px calc(28px + env(safe-area-inset-bottom));
  font: 400 16px/1.5 Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--papel);
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(255,106,156,.30) 0%, rgba(255,106,156,0) 70%),
    radial-gradient(55% 40% at 85% 95%, rgba(168,31,77,.26) 0%, rgba(168,31,77,0) 72%),
    var(--funda);
  display: flex;
  justify-content: center;
}

/* Link que só aparece para quem navega pelo teclado. */
.pular {
  position: absolute; left: -999px;
  background: var(--papel); color: var(--tinta);
  padding: 10px 14px; border-radius: 10px;
}
.pular:focus { left: 16px; top: 16px; z-index: 10; }

.folha { width: min(100%, 460px); }

/* ---------------------------------------------------------------- topo --- */

.topo { text-align: center; margin-bottom: 26px; }

.marca {
  width: 78px; height: 78px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rosa-funda), var(--rosa) 70%);
  box-shadow: 0 14px 36px -14px rgba(255,106,156,.75);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; letter-spacing: .04em;
  color: var(--funda);
}

.topo h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; letter-spacing: .01em;
}

.assinatura {
  margin: 4px 0 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rosa);
}

.bio {
  margin: 14px auto 0; max-width: 34ch;
  font-size: 14.5px; line-height: 1.55; color: var(--tinta-3);
}

/* --------------------------------------------------------------- botoes --- */

.links { display: grid; gap: 12px; }

.botao {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center; gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--papel);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.botao:hover,
.botao:focus-visible { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }

/* O primeiro botão é a loja: é ele que tem de ganhar o olho. */
.botao--destaque {
  background: linear-gradient(120deg, var(--rosa-funda) 0%, var(--rosa-forte) 42%, var(--rosa) 100%);
  border-color: transparent;
  box-shadow: 0 16px 34px -18px rgba(255,106,156,.9);
}
.botao--destaque:hover,
.botao--destaque:focus-visible { background: linear-gradient(120deg, var(--rosa-forte) 0%, var(--rosa) 100%); }

.botao--zap .icone { color: #8FE3C8; }

.icone {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: var(--rosa-tenue);
}
.botao--destaque .icone { background: rgba(23,12,17,.22); color: var(--papel); }
.icone svg { width: 21px; height: 21px; }

.texto { min-width: 0; }
.texto strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: .01em; }
.texto small {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.botao--destaque .texto small { color: rgba(23,12,17,.78); }

.seta { font-size: 17px; opacity: .6; }
.botao--destaque .seta { opacity: .85; }

/* --------------------------------------------------------------- redes --- */

.redes {
  display: flex; justify-content: center; gap: 10px;
  margin: 24px 0 0;
}
.redes a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--papel);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .15s ease, transform .15s ease;
}
.redes a:hover,
.redes a:focus-visible { background: var(--rosa); color: var(--funda); transform: translateY(-2px); }
.redes a:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.redes svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------- rodape --- */

.rodape { margin-top: 26px; text-align: center; color: var(--tinta-3); }
.rodape p { margin: 0; font-size: 12px; }
.rodape .aviso { margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,.45); }

/* Tela larga: a página continua estreita (é um link da bio, não um site), mas
   ganha respiro em cima. */
@media (min-width: 720px) {
  body { padding-top: 56px; }
  .topo h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .botao, .redes a { transition: none; }
  .botao:hover, .redes a:hover { transform: none; }
}