/* ==========================================================================
   GRIFFIN SOLUTION — página de links (link na bio)
   Reutiliza os tokens e o sistema da landing (style.css); este arquivo só
   cobre o que é próprio da página: as faixas claras de topo e rodapé, o
   palco escuro, o perfil, os cartões de canal e o bloco Pix.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALCO — fundo escuro com os brilhos da marca
   -------------------------------------------------------------------------- */
.lbody{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#141416;
  background-image:
    radial-gradient(620px 380px at 50% 20%, rgba(255,128,21,.18), transparent 62%),
    radial-gradient(560px 380px at 8% 96%, rgba(255,128,21,.10), transparent 58%);
  background-attachment:fixed;
  color:var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   2. FAIXAS CLARAS — topo (logo) e rodapé (institucional)
   -------------------------------------------------------------------------- */
.lbar{ background:var(--bg); }
.lbar__in{
  width:100%;
  max-width:480px;
  margin-inline:auto;
  padding-inline:20px;
}

.lbar--top .lbar__in{
  padding-block:26px 88px;   /* o vão de baixo é onde o avatar entra */
  display:flex;
  justify-content:center;
}
.lbar__logo{ --brand-fs:33px; }

.lbar--ft{
  margin-top:auto;
  background:var(--bg-alt);
  border-top:1px solid var(--hair);
}
.lbar--ft .lbar__in{
  padding-block:26px 32px;
  display:grid; gap:7px;
  text-align:center;
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink-3);
}

.lbar__links{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.lbar__links a{
  text-decoration:underline;
  text-decoration-color:var(--hair);
  text-underline-offset:3px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.lbar__links a:hover{ color:var(--ember-hot); text-decoration-color:var(--ember-line); }

.lbar__by{ margin-top:4px; font-size:.74rem; }
.lbar__by a{ font-weight:600; color:var(--ink-2); }
.lbar__by a:hover{ color:var(--ember-hot); }

/* --------------------------------------------------------------------------
   3. COLUNA CENTRAL
   -------------------------------------------------------------------------- */
.links{
  width:100%;
  max-width:480px;
  margin-inline:auto;
  padding:0 20px 40px;
}

/* --------------------------------------------------------------------------
   4. PERFIL — avatar sobreposto à faixa, nome, chamada e redes
   -------------------------------------------------------------------------- */
.prof{ text-align:center; }

/* O anel laranja e o disco branco são os dois fundos do próprio avatar, e o
   símbolo entra solto por cima. Não dá para arredondar o <img>: o conteúdo de
   um elemento substituído é recortado pela curva da BORDA DE CONTEÚDO, ou seja
   raio − padding (61−19 = 42px aqui). O desenho tem raio 50px a partir do
   centro, então o rabo e as patas do grifo eram comidos por esse recorte —
   e nenhum valor de padding resolve, porque afastar a borda encolhe o raio
   na mesma medida. */
.prof__avatar{
  position:relative;
  display:inline-grid; place-items:center;
  width:132px; height:132px;
  margin-top:-66px;          /* metade do círculo invade a faixa branca */
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 60.5px, transparent 61.5px),
    linear-gradient(160deg,#FF9D41 0%,#FF690E 100%);
  box-shadow:0 16px 36px -16px rgba(255,128,21,.65), var(--sh-glow);
}
.prof__avatar img{
  width:auto;
  height:92px;               /* raio do desenho ≈ 55px, com folga no disco */
}

.prof__name{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:20px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.95rem;
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;
}
.prof__check{ display:block; flex:none; width:32px; height:32px; }
.prof__check svg{ width:100%; height:100%; display:block; }

.prof__role{
  margin:10px auto 0;
  max-width:34ch;
  font-size:.98rem;
  line-height:1.5;
  color:var(--on-dark-2);
}

.prof__loc{
  margin-top:7px;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  opacity:.7;
}

.prof__social{
  display:flex; justify-content:center; gap:14px;
  margin-top:24px;
}
.prof__soc{
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:16px;
  color:#fff;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             filter .22s var(--ease);
}
.prof__soc svg{ width:27px; height:27px; }
.prof__soc:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.prof__soc:active{ transform:translateY(0); }

/* cada tijolo na cor da própria marca */
.prof__soc--ig{
  background:radial-gradient(circle at 28% 108%,
    #FDCE6E 0%, #FA8E37 12%, #F5504E 34%, #E23A78 52%, #B32EA2 70%, #6B34C9 92%);
  box-shadow:0 14px 26px -14px rgba(214,36,159,.95);
}
.prof__soc--fb{
  background:#1877F2;
  box-shadow:0 14px 26px -14px rgba(24,119,242,.95);
}
/* o Gmail é colorido sobre branco, então o tijolo é branco e o ícone traz as
   cores; o glifo é maior porque o desenho tem margem interna própria */
.prof__soc--ml{
  background:#fff;
  box-shadow:0 14px 26px -14px rgba(0,0,0,.85);
}
.prof__soc--ml svg{ width:31px; height:31px; }

/* --------------------------------------------------------------------------
   5. CARTÕES DE CANAL
   -------------------------------------------------------------------------- */
.links__nav{
  display:grid; gap:14px;
  margin-top:30px;
}

.lcard{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px 16px 16px;
  border-radius:22px;
  border:1px solid var(--dark-line);
  background:rgba(255,255,255,.05);
  color:#fff;
  transition:transform .22s var(--ease), border-color .22s var(--ease),
             background-color .22s var(--ease), box-shadow .22s var(--ease);
}
.lcard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,128,21,.5);
  background:rgba(255,128,21,.08);
  box-shadow:0 16px 30px -20px rgba(255,128,21,.7);
}
.lcard:active{ transform:translateY(0); }

.lcard__ico{
  flex:none;
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:15px;
  background:linear-gradient(160deg,#FF9D41 0%,#FF690E 100%);
  color:#fff;
  box-shadow:0 10px 20px -12px rgba(255,103,0,.9);
}
.lcard__ico svg{ width:26px; height:26px; }

/* Cada tijolo vem do serviço que ele abre, como na fileira de redes: WhatsApp
   no verde da marca, telefone no azul de chamada, e os que têm logo colorido
   (Gmail, Google Maps e o próprio grifo) sobre branco, que é como esses logos
   foram desenhados para aparecer. */
.lcard__ico--wa{
  background:linear-gradient(160deg,#2ED573 0%,#12A150 100%);
  box-shadow:0 10px 20px -12px rgba(37,211,102,.9);
}
.lcard__ico--tel{
  background:linear-gradient(160deg,#4C9BFF 0%,#1A73E8 100%);
  box-shadow:0 10px 20px -12px rgba(26,115,232,.9);
}
.lcard__ico--white{
  background:#fff;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.85);
}
.lcard__ico--white svg{ width:29px; height:29px; }
.lcard__ico img{ display:block; width:auto; height:32px; }

.lcard__lbl{ display:grid; gap:3px; min-width:0; }
.lcard__t{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.09rem;
  line-height:1.25;
  color:#fff;
}
.lcard__s{
  font-size:.89rem;
  line-height:1.35;
  color:var(--on-dark-2);
}

.lcard__go{
  flex:none; margin-left:auto;
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:var(--ember-lit);
  transition:background-color .22s var(--ease), color .22s var(--ease),
             transform .22s var(--ease);
}
.lcard__go svg{ width:17px; height:17px; }
.lcard:hover .lcard__go{
  background:var(--ember);
  color:#fff;
  transform:translateX(2px);
}

/* --------------------------------------------------------------------------
   6. PIX — chave, cópia e QR Code
   -------------------------------------------------------------------------- */
.pix{
  margin-top:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--dark-line);
  background:rgba(255,255,255,.05);
}

.pix__hd{ display:flex; align-items:flex-start; gap:14px; }

.pix__ico{
  flex:none;
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:15px;
  background:linear-gradient(160deg,#4FD1C0 0%,#1C9E8E 100%);
  color:#fff;
  box-shadow:0 10px 20px -12px rgba(28,158,142,.9);
}
.pix__ico svg{ width:27px; height:27px; }

.pix__id{ min-width:0; }
.pix__kicker{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  opacity:.75;
}
.pix__key{
  margin-top:4px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.2rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:#fff;
  overflow-wrap:anywhere;
}
.pix__holder{
  margin-top:3px;
  font-size:.86rem;
  color:var(--on-dark-2);
}

.pix__acts{ display:grid; gap:10px; margin-top:16px; }

.pix__btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%;
  padding:14px 18px;
  border-radius:100px;
  border:1px solid var(--dark-line);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease), border-color .22s var(--ease);
}
.pix__btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,128,21,.5);
  background:rgba(255,128,21,.12);
}
.pix__btn:active{ transform:translateY(0); }

.pix__btn--solid{
  border-color:transparent;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  box-shadow:0 12px 26px -14px rgba(255,103,0,.9);
}
.pix__btn--solid:hover{
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  border-color:transparent;
  box-shadow:0 16px 30px -14px rgba(255,103,0,.85), var(--sh-glow);
}

.pix__btn-ico{ display:block; flex:none; width:19px; height:19px; }
.pix__btn-ico svg{ width:100%; height:100%; display:block; }

.pix__msg{
  margin-top:12px;
  text-align:center;
  font-size:.8rem;
  color:var(--ember-lit);
}
.pix__msg:empty{ display:none; }

/* --------------------------------------------------------------------------
   7. HORÁRIO DE ATENDIMENTO
   -------------------------------------------------------------------------- */
.links__hours{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:26px;
  font-size:.83rem;
  color:var(--on-dark-2);
}
.links__hours b{ color:#fff; font-weight:700; }
.links__hours-ico{ display:block; flex:none; width:17px; height:17px; opacity:.8; }
.links__hours-ico svg{ width:100%; height:100%; display:block; }

/* --------------------------------------------------------------------------
   8. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  .lbar--top .lbar__in{ padding-block:32px 94px; }
  .prof__avatar{
    width:140px; height:140px; margin-top:-70px;
    background:
      radial-gradient(circle at 50% 50%, #fff 0 64.5px, transparent 65.5px),
      linear-gradient(160deg,#FF9D41 0%,#FF690E 100%);
  }
  .prof__avatar img{ height:98px; }
  .prof__name{ font-size:2.15rem; }
  .links{ padding-bottom:52px; }
}

@media (max-width:359px){
  .prof__name{ font-size:1.7rem; }
  .lcard{ gap:13px; padding-left:13px; }
  .lcard__ico{ width:46px; height:46px; }
  .lcard__t{ font-size:1.02rem; }
}

@media (prefers-reduced-motion:reduce){
  .prof__soc,.lcard,.lcard__go,.pix__btn{ transition:none; }
  .prof__soc:hover,.lcard:hover,.pix__btn:hover{ transform:none; }
  .lcard:hover .lcard__go{ transform:none; }
}

/* --------------------------------------------------------------------------
   9. MODAL DO PIX — folha arrastável no celular, caixa central no desktop
   Duas etapas dentro da mesma folha: informar o valor e ler o QR Code.
   Toda a movimentação é feita por `transform` (composição na GPU), então
   abrir, arrastar e subir por causa do teclado não disparam layout.
   -------------------------------------------------------------------------- */
.pixm{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:flex-end; justify-content:center;
}
.pixm[hidden]{ display:none; }

.pixm__scrim{
  position:absolute; inset:0;
  background:rgba(8,8,10,.66);
  opacity:0;
  transition:opacity .28s var(--ease);
}
.pixm.is-open .pixm__scrim{ opacity:1; }

.pixm__sheet{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:100%; max-width:520px;
  /* --pixm-vh é a altura real do visualViewport: com o teclado aberto a folha
     encolhe em vez de escorregar para trás dele. */
  max-height:calc(var(--pixm-vh, 100vh) - 14px);
  border:1px solid rgba(255,255,255,.13);
  border-bottom:0;
  border-radius:26px 26px 0 0;
  background:
    radial-gradient(130% 72% at 50% 0%, rgba(255,128,21,.22), transparent 62%),
    #17171A;
  box-shadow:0 -22px 60px -22px rgba(0,0,0,.85);
  transform:translate3d(0, calc(100% + 24px), 0);
  transition:transform .3s var(--ease);
  will-change:transform;
  outline:none;
}
.pixm.is-open .pixm__sheet{
  /* --pixm-drag vem do arraste; --pixm-kb, da altura do teclado */
  transform:translate3d(0, calc(var(--pixm-drag, 0px) - var(--pixm-kb, 0px)), 0);
}
.pixm__sheet.is-dragging{ transition:none; }

/* --- Cabeçalho: alça do arraste e o X --- */
.pixm__hd{
  position:relative; flex:none;
  display:flex; align-items:center; justify-content:center;
  height:46px;
  touch-action:none;              /* o gesto é do arraste, não da rolagem */
  cursor:grab;
}
.pixm__hd:active{ cursor:grabbing; }
.pixm__grip{
  width:44px; height:5px;
  border-radius:100px;
  background:rgba(255,255,255,.3);
}
.pixm__x{
  position:absolute; top:9px; right:12px;
  display:grid; place-items:center;
  width:36px; height:36px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s var(--ease);
}
.pixm__x:hover{ background:rgba(255,255,255,.2); }
.pixm__x svg{ width:19px; height:19px; display:block; }

.pixm__body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 22px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* --- Conteúdo comum aos dois passos --- */
.pixm__ttl{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.5rem;
  line-height:1.2;
  text-align:center;
  color:#fff;
}
.pixm__who{
  margin-top:7px;
  text-align:center;
  font-size:.87rem;
  line-height:1.5;
  color:var(--on-dark-2);
}
.pixm__key2{
  font-family:var(--f-mono);
  font-size:.8rem;
  color:rgba(255,255,255,.72);
  overflow-wrap:anywhere;
}

/* --- Passo 1: valor --- */
.pixm__form{ margin-top:20px; }
.pixm__lbl{
  display:block; margin-bottom:8px;
  font-size:.82rem; font-weight:600;
  color:var(--on-dark-2);
}
.pixm__inp{
  width:100%;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.4rem;            /* ≥16px: evita o zoom automático do iOS */
  line-height:1.2;
  outline:none;
  transition:border-color .2s var(--ease), background-color .2s var(--ease),
             box-shadow .2s var(--ease);
}
.pixm__inp::placeholder{ color:rgba(255,255,255,.32); font-weight:600; }
.pixm__inp:focus{
  border-color:rgba(255,128,21,.6);
  background:rgba(255,128,21,.08);
  box-shadow:0 0 0 3px rgba(255,128,21,.16);
}
.pixm__hint{
  margin-top:9px;
  font-size:.78rem; line-height:1.45;
  color:var(--on-dark-2); opacity:.8;
}

/* --- Botões --- */
.pixm__cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:18px;
  padding:16px 20px;
  border:0; border-radius:100px;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
  color:#fff;
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.02rem; line-height:1;
  cursor:pointer;
  box-shadow:0 14px 28px -14px rgba(255,103,0,.95);
  transition:box-shadow .22s var(--ease), transform .12s var(--ease);
}
.pixm__cta:hover{ box-shadow:0 18px 34px -14px rgba(255,103,0,.9), var(--sh-glow); }
.pixm__cta:active{ transform:translateY(1px); }
.pixm__cta.is-busy{ pointer-events:none; opacity:.86; }

.pixm__cta-ico{ display:block; flex:none; width:19px; height:19px; }
.pixm__cta-ico svg{ width:100%; height:100%; display:block; }

.pixm__spin{
  display:none; flex:none;
  width:17px; height:17px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:pixm-spin .7s linear infinite;
}
.pixm__cta.is-busy .pixm__spin{ display:block; }
@keyframes pixm-spin{ to{ transform:rotate(360deg); } }

.pixm__ghost{
  display:block; width:100%;
  margin-top:4px; padding:13px;
  border:0; background:none;
  color:var(--on-dark-2);
  font-family:var(--f-display);
  font-weight:600; font-size:.92rem;
  cursor:pointer;
  transition:color .2s var(--ease);
}
.pixm__ghost:hover{ color:#fff; }

/* --- Passo 2: QR Code --- */
.pixm__amount{
  margin-top:6px;
  text-align:center;
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.95rem;
  line-height:1.15;
  color:#fff;
}
.pixm__amount.is-free{
  font-size:.95rem; font-weight:600;
  color:var(--on-dark-2);
}
.pixm__qr{
  width:fit-content;
  margin:16px auto 0;
  padding:14px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.95);
}
.pixm__qr canvas{ display:block; max-width:100%; height:auto; }

.pixm__err{
  margin-top:12px;
  text-align:center;
  font-size:.8rem; line-height:1.45;
  color:#FFB27A;
}
.pixm__err:empty{ display:none; }

/* --- Com o teclado aberto: a folha enxuga para o botão continuar à vista --- */
.pixm-kb .pixm__hd{ height:32px; }
.pixm-kb .pixm__ttl{ font-size:1.2rem; }
.pixm-kb .pixm__who,
.pixm-kb .pixm__hint{ display:none; }
.pixm-kb .pixm__form{ margin-top:14px; }
.pixm-kb .pixm__body{ padding-bottom:16px; }

/* --- Página travada enquanto a folha está aberta --- */
.pixm-lock, .pixm-lock body{ overflow:hidden; }

/* --- Desktop: caixa centralizada, sem alça --- */
@media (min-width:600px){
  .pixm{ align-items:center; padding:24px; }
  .pixm__sheet{
    max-width:404px;
    max-height:calc(100vh - 48px);
    border:1px solid rgba(255,255,255,.13);
    border-radius:26px;
    transform:translate3d(0,16px,0) scale(.98);
    opacity:0;
    transition:transform .26s var(--ease), opacity .2s var(--ease);
  }
  .pixm.is-open .pixm__sheet{ transform:none; opacity:1; }
  .pixm__hd{ height:30px; cursor:default; touch-action:auto; }
  .pixm__grip{ display:none; }
  .pixm__x{ top:12px; }
}

@media (prefers-reduced-motion:reduce){
  .pixm__scrim,.pixm__sheet,.pixm__cta,.pixm__ghost,.pixm__x,.pixm__inp{ transition:none; }
  .pixm__sheet{ transform:none; opacity:1; }
  .pixm__spin{ animation-duration:1.6s; }
}