/* ══════════════════════════════════════════════════════════════════════════════
   JU COOKIE DESIGNER · /links
   Uma composição só: um cartão de confeitaria sobre fundo quente.
   Consome ds.css (tokens, botões, pill, notch, motion). Nada de estilo paralelo.
   ══════════════════════════════════════════════════════════════════════════ */

/* os dois brilhos do fundo viram token, para acompanharem o tema */
:root{
  --links-brilho-topo:var(--ju-cyan-100);
  --links-brilho-base:var(--ju-raspberry-50);
}
[data-theme="dark"]{
  --links-brilho-topo:rgba(93,174,183,.20);
  --links-brilho-base:rgba(176,76,99,.18);
}

.pagina-links{
  position:relative;
  min-height:100vh;min-height:100svh;
  padding:clamp(16px,4vh,48px) var(--gutter) calc(clamp(24px,5vh,56px) + env(safe-area-inset-bottom));
  background:
    radial-gradient(115% 55% at 50% 0%, var(--links-brilho-topo) 0%, transparent 62%),
    radial-gradient(105% 45% at 50% 100%, var(--links-brilho-base) 0%, transparent 58%),
    var(--color-background);
}
/* único sistema decorativo da página: os pontos da camada de campanha */
.pagina-links::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--campaign-pattern);background-size:var(--campaign-pattern-size);
  opacity:.45;
}
/* confeitos ao LADO do cartão — atrás dele ficariam invisíveis.
   O body já tem overflow-x:hidden, então não geram rolagem lateral. */
.sprinkles-links{position:absolute;top:52px;left:calc(50% - 600px);width:170px;opacity:.7;z-index:0}
@media (max-width:1180px){.sprinkles-links{display:none}}

/* ─── O CARTÃO ───────────────────────────────────────────────────────────── */
.cartao{
  position:relative;z-index:1;
  width:100%;max-width:440px;margin-inline:auto;
  background:var(--color-surface);
  border:var(--border-subtle);
  box-shadow:var(--shadow-raised);
  clip-path:polygon(var(--notch-xl) 0,100% 0,100% calc(100% - var(--notch-xl)),calc(100% - var(--notch-xl)) 100%,0 100%,0 var(--notch-xl));
}

/* ─── CAPA + RETRATO ─────────────────────────────────────────────────────── */
.capa{position:relative;margin:0}
.capa__foto{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--color-surface-sunken);
}
.capa__retrato{
  position:absolute;left:var(--card-pad);bottom:-34px;
  width:86px;height:86px;border-radius:var(--radius-circle);
  object-fit:cover;object-position:50% 20%;
  border:4px solid var(--color-surface);
  box-shadow:var(--shadow-card);
}

/* ─── IDENTIDADE ─────────────────────────────────────────────────────────── */
.ident{padding:46px var(--card-pad) 0}
.ident__nome{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(28px,7.4vw,36px);line-height:1.1;letter-spacing:-.02em;
  color:var(--color-text-primary);
}
.ident__papel{
  margin-top:6px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-accent-ink);
}
.ident__desc{
  margin-top:var(--space-4);
  font-size:var(--text-body);line-height:1.55;color:var(--color-text-secondary);
  text-wrap:pretty;
}
.ident .pill{margin-top:var(--space-4)}

/* ─── AÇÕES ──────────────────────────────────────────────────────────────── */
.acoes{display:grid;gap:10px;padding:var(--space-6) var(--card-pad) 0}
.acoes__principal{min-height:56px;font-size:16px}
.acoes__nota{
  margin-top:-2px;text-align:center;
  font-size:var(--text-caption);color:var(--color-text-tertiary);
}

/* portfólio — miniaturas reais em vez de mais um pill */
.tile{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:70px;padding:9px 14px 9px 10px;
  background:var(--color-background-alt);border:var(--border-default);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
  color:var(--color-text-primary);
  transition:transform var(--duration-standard) var(--easing-standard),
             border-color var(--duration-fast) var(--easing-standard),
             box-shadow var(--duration-standard) var(--easing-standard);
}
.tile:hover{transform:translateY(-2px);border-color:var(--color-border-strong);box-shadow:var(--shadow-card);color:var(--color-text-primary);background:var(--color-surface)}
.tile__thumbs{display:flex;flex:0 0 auto}
.tile__thumbs img{
  width:46px;height:46px;object-fit:cover;
  border-radius:var(--radius-sm);border:2px solid var(--color-surface);
  margin-left:-14px;
}
.tile__thumbs img:first-child{margin-left:0}
.tile__texto{display:flex;flex-direction:column;min-width:0;flex:1}
.tile__texto strong{font-size:15px;font-weight:700;line-height:1.3}
.tile__texto span{font-size:var(--text-caption);color:var(--color-text-tertiary);line-height:1.4}
.tile__seta{flex:0 0 auto;color:var(--color-accent-hover);transition:transform var(--duration-standard) var(--easing-emphasized)}
.tile:hover .tile__seta{transform:translateX(3px)}

/* Instagram — o mais discreto da hierarquia */
.linha-ig{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:0 4px;
  font-size:var(--text-body-sm);color:var(--color-text-secondary);
}
.linha-ig svg{flex:0 0 auto;color:var(--color-accent-hover)}
.linha-ig b{font-weight:700;color:var(--color-text-primary)}
.linha-ig .seta{margin-left:auto;color:var(--color-text-muted);transition:transform var(--duration-standard) var(--easing-emphasized)}
.linha-ig:hover{color:var(--color-text-primary)}
.linha-ig:hover .seta{transform:translateX(3px)}

/* ─── CAMPANHA (renderizada por ds.js só quando existe de verdade) ───────── */
.campanha{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:68px;padding:9px 14px 9px 10px;
  background:var(--campaign-surface);
  border:1px solid var(--campaign-primary);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
  color:var(--campaign-text);
  transition:transform var(--duration-standard) var(--easing-standard);
}
.campanha:hover{transform:translateY(-2px);color:var(--campaign-text)}
.campanha__foto img{
  width:52px;height:52px;object-fit:cover;
  clip-path:polygon(var(--notch-sm) 0,100% 0,100% calc(100% - var(--notch-sm)),calc(100% - var(--notch-sm)) 100%,0 100%,0 var(--notch-sm));
}
.campanha__texto{display:flex;flex-direction:column;min-width:0;flex:1}
/* a etiqueta usa tinta legível por padrão; um tema de campanha pode sobrepor */
.campanha__etiqueta{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-ink)}
.campanha__nome{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:18px;line-height:1.2}
.campanha__chamada{font-size:var(--text-caption);color:var(--color-text-tertiary)}
.campanha__seta{flex:0 0 auto;color:var(--color-accent-hover)}

/* ─── INFORMAÇÕES RÁPIDAS ────────────────────────────────────────────────── */
.fatos{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:var(--space-6) var(--card-pad) 0;
}
.fatos li{
  font-size:var(--text-caption);line-height:1.4;
  padding:6px 11px;border-radius:var(--radius-pill);
  background:var(--color-background-alt);color:var(--color-text-tertiary);
  border:1px solid var(--color-border-subtle);
}

/* ─── ASSINATURA ─────────────────────────────────────────────────────────── */
.assinatura{
  margin-top:var(--space-6);
  padding:var(--space-4) var(--card-pad) var(--space-5);
  border-top:var(--border-subtle);
  text-align:center;
}
.assinatura__script{
  display:block;font-family:var(--font-accent);font-size:19px;line-height:1.1;
  color:var(--color-accent-ink);
}
.assinatura small{display:block;margin-top:4px;font-size:11px;color:var(--color-text-muted)}

/* ─── DESKTOP: o cartão vira painel de duas colunas ──────────────────────── */
@media (min-width:900px){
  .cartao{
    max-width:820px;
    display:grid;
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
    grid-template-areas:
      "capa   acoes"
      "ident  acoes"
      "fatos  acoes"
      "assina assina";
  }
  .capa{grid-area:capa}
  .ident{grid-area:ident}
  /* a coluna de ações ocupa toda a altura do perfil e centraliza o conteúdo:
     sem isso os botões param no meio do cartão e sobra um vazio embaixo */
  .acoes{
    grid-area:acoes;align-self:stretch;align-content:center;
    padding:var(--space-8) var(--card-pad) var(--space-8) 0;
    border-left:var(--border-subtle);padding-left:var(--card-pad);
  }
  .fatos{grid-area:fatos;padding-bottom:var(--space-8)}
  .assinatura{grid-area:assina;margin-top:0}
  .capa__foto{aspect-ratio:3/2}
  .ident__desc{font-size:var(--text-body-lg)}
}

/* ─── CELULARES ESTREITOS ────────────────────────────────────────────────── */
@media (max-width:360px){
  .capa__retrato{width:74px;height:74px;bottom:-28px}
  .ident{padding-top:40px}
  .tile__thumbs img{width:40px;height:40px}
}