/* =========================================================
   Jeryhelen Valente Advocacia — página de links
   Mesmos tokens de styles.css (mantenha os dois em sincronia)
   ========================================================= */

:root{
  --bordo:        #551126;
  --bordo-claro:  #7d2440;
  --bordo-escuro: #3a0c1a;
  --rose-claro:   #DBA8B4;
  --offwhite:     #FFFBF1;
  --whats:        #1FA855;

  --serif: "Lora", Georgia, serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --suave: cubic-bezier(.33,.9,.35,1);
}

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

body{
  margin:0;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(28px,6vw,64px) 20px;
  background: var(--bordo-escuro);
  background-image: linear-gradient(168deg, var(--bordo) 0%, var(--bordo-escuro) 100%);
  font-family: var(--sans);
  color: var(--offwhite);
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none; }

/* ---------- fundo ---------- */
.fundo-pattern{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("assets/pattern.png");
  background-size: clamp(300px, 46vw, 520px) auto;
  background-repeat: repeat;
  opacity:.06;
  mask-image: radial-gradient(90% 70% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 30%, transparent 85%);
}
.aura{
  position:fixed; z-index:0; pointer-events:none;
  top:-18%; left:50%; translate:-50% 0;
  width:min(780px, 130vw); aspect-ratio:1;
  background: radial-gradient(circle, rgba(219,168,180,.20) 0%, transparent 62%);
}

/* ---------- cartão ---------- */
.cartao{
  position:relative; z-index:1;
  width:100%; max-width: 440px;
  text-align:center;
}

.retrato{
  margin:0 auto clamp(20px,3vw,26px);
  width: clamp(112px, 26vw, 138px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  box-shadow: 0 0 0 1.5px rgba(255,251,241,.3),
              0 0 0 8px rgba(255,251,241,.07),
              0 18px 44px -16px rgba(0,0,0,.5);
}
.retrato img{ width:100%; height:100%; object-fit:cover; display:block; }

h1{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.6rem, 6vw, 2rem); line-height:1.2;
  margin:0 0 .5em;
}

.oab{
  margin:0; font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--rose-claro);
}

.chamada{
  margin: clamp(18px,3vw,24px) auto 0; max-width: 34ch;
  font-size:.94rem; font-weight:300; line-height:1.65;
  color: rgba(255,251,241,.84);
}

/* ---------- botões ---------- */
.botoes{
  display:grid; gap:13px;
  margin: clamp(28px,5vw,40px) 0 0;
}

.link{
  display:grid; grid-template-columns: 22px 1fr 16px;
  align-items:center; gap:15px;
  padding: 15px 22px;
  border-radius: 999px;
  border:1.5px solid var(--offwhite);
  background: var(--offwhite);
  color: var(--bordo);
  box-shadow: 0 16px 38px -16px rgba(0,0,0,.5);
  text-align:left;
  transition: transform .3s var(--suave), background-color .3s var(--suave),
              border-color .3s var(--suave), box-shadow .3s var(--suave);
}
.link-icone{ display:flex; color: var(--bordo); }
.link-icone svg{ width:22px; height:22px; }

.link-texto{ min-width:0; }
.link-texto b{
  display:block; font-size:.9rem; font-weight:600; letter-spacing:.01em;
}
.link-texto small{
  display:block; margin-top:2px;
  font-size:.74rem; font-weight:400; letter-spacing:.02em;
  color: var(--bordo-claro);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.link-seta{ display:flex; justify-self:end; opacity:.45; }
.link-seta svg{ width:16px; height:16px; }

.link:hover{
  background:#fff; border-color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -16px rgba(0,0,0,.58);
}
.link:hover .link-seta{ opacity:.85; }

.link:focus-visible{
  outline:2px solid var(--rose-claro); outline-offset:3px;
}

/* ---------- rodapé ---------- */
.rodape{ margin-top: clamp(34px,6vw,48px); }
.rodape .selo{
  display:block; width:46px; height:auto; margin:0 auto 16px; opacity:.5;
}
.rodape p{
  margin:0; font-size:.7rem; font-weight:300; line-height:1.7;
  color: rgba(255,251,241,.5);
}

@media (prefers-reduced-motion: reduce){
  .link{ transition:none; }
  .link:hover{ transform:none; }
}