/* ============================================================
   Murillo Bacchi — /links
   Depende de base.css. Design System v2.
   ============================================================ */

.links-page{--max-width:660px}
/* na /links a régua encosta na coluna: vira moldura, não fundo */
.links-page .grade span:nth-child(1){left:0}
.links-page .grade span:nth-child(2){left:50%}
.links-page .grade span:nth-child(3){left:100%}

.links-main{position:relative;z-index:5;padding-bottom:clamp(48px,6vw,72px)}

/* ── PERFIL ─────────────────────────────────────────────── */
.links-header{text-align:center;padding:clamp(48px,7vw,84px) 0 clamp(32px,4vw,48px)}
.links-logo{width:clamp(52px,7vw,66px);height:auto;margin:0 auto clamp(18px,2.2vw,24px)}
/* O retrato É a âncora da página: fotografado sobre o rosa do sistema,
   funciona como o bloco de retrato do modo rosa. É o único retrato que
   NÃO leva grayscale — o rosa dele é o rosa da marca.                 */
.avatar-photo{width:clamp(200px,54vw,300px);height:auto;border-radius:6px;
  margin:0 auto clamp(24px,3vw,32px);box-shadow:0 0 0 1px rgba(255,0,122,.45)}
.links-name{font-size:clamp(34px,5.4vw,62px);line-height:.94;
  letter-spacing:var(--track-display)}
.links-tagline{margin:18px auto 0;max-width:44ch;color:var(--texto-medio);
  font-size:clamp(16px,1.3vw,18px);line-height:1.6}

/* ── CARDS ──────────────────────────────────────────────── */
.link-card{display:block;background:var(--carvao);border:1px solid var(--linha-fina);
  border-radius:6px;padding:clamp(24px,2.8vw,32px);margin-bottom:16px;
  position:relative;overflow:hidden;
  transition:transform .34s var(--mola),border-color .3s,background .3s}
.link-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rosa);transform:scaleY(0);transform-origin:top;
  transition:transform .38s var(--mola)}
.link-card:hover,.link-card:focus-within{transform:translateY(-3px) rotate(-.35deg);
  border-color:rgba(255,0,122,.4);background:var(--neutro-800)}
.link-card:hover::before,.link-card:focus-within::before{transform:scaleY(1)}
.link-card__title{font-size:clamp(19px,2.2vw,25px)}
.link-card__title + .contact-row{margin-top:22px}
.link-card__desc{margin:10px 0 22px;color:var(--texto-medio);font-size:16px;max-width:46ch}

/* o card primário é o WhatsApp: ganha o filete rosa fixo */
.link-card--primary::before{transform:scaleY(1);background:var(--rosa)}

.link-card .btn{width:100%}
.link-card .btn > span:first-child{flex:1;justify-content:center;gap:11px}

/* ── REDES ──────────────────────────────────────────────────
   Os três ícones ocupam a linha inteira e têm a MESMA altura do
   botão dos outros cards (56px). Sem isso o card de redes ficava
   mais baixo e mais vazio que os demais, quebrando o ritmo.     */
.contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.contact-row .social-icon{width:100%;height:56px}
.contact-row .social-icon svg{width:22px;height:22px}

/* ── RODAPÉ ─────────────────────────────────────────────── */
.links-footer{text-align:center;padding:clamp(36px,5vw,56px) 0 0;
  border-top:1px solid var(--linha-fina);margin-top:clamp(30px,4vw,44px)}
.links-footer > a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--creme);border-bottom:1px solid var(--rosa);
  padding-bottom:5px;transition:color .2s}
.links-footer > a:hover{color:var(--rosa)}
.links-footer .footer-copy{margin-top:20px}