/* Linkd page styles. The page reads as a shop front: a striped awning with a scalloped valance,
   a square photo under it, a tilted "open" sign, the name left-aligned like a sign board,
   links as a shelf, prices as hanging tags and Pix as a paper receipt. */
.vl{position:relative;min-height:100%;background:var(--vl-fundo);color:var(--vl-texto);font:400 16px/1.5 var(--vl-fonte);padding-bottom:104px;box-sizing:border-box;overflow-x:clip;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  --vl-sobre-cor:var(--vl-cartao);--vl-linha:color-mix(in srgb,var(--vl-texto) 13%,transparent);--vl-clara:color-mix(in srgb,var(--vl-cor) 72%,#fff)}
.vl *,.vl *::before,.vl *::after{box-sizing:border-box}
.vl a{color:inherit}
.vl :focus-visible{outline:3px solid var(--vl-cor);outline-offset:3px}
.vl svg{display:block}

/* Awning: stripes when there is no cover photo, the photo when there is one. The valance always hangs below. */
.vl__capa{position:relative;height:154px;background:repeating-linear-gradient(90deg,var(--vl-cor) 0 26px,var(--vl-clara) 26px 52px)}
.vl__capa img{width:100%;height:100%;object-fit:cover;display:block}
.vl__capa::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:13px;z-index:1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.14));
  background:radial-gradient(circle at 13px 0,var(--vl-cor) 12.5px,transparent 13px) 0 0/52px 13px repeat-x,radial-gradient(circle at 39px 0,var(--vl-clara) 12.5px,transparent 13px) 0 0/52px 13px repeat-x}
@media (min-width:720px){.vl__capa{height:220px}}

.vl__corpo{max-width:480px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr)}
.vl__id{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:-50px;position:relative;z-index:2}
.vl__foto{width:108px;height:108px;flex:none;border-radius:26px;overflow:hidden;background:var(--vl-texto);color:var(--vl-fundo);display:grid;place-items:center;font-size:46px;font-weight:800;border:5px solid var(--vl-fundo);transform:rotate(-2deg);box-shadow:0 14px 26px -16px rgba(0,0,0,.55)}
.vl__foto img{width:100%;height:100%;object-fit:cover}
.vl__placa{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1;padding:8px 12px 8px 10px;border-radius:6px;background:var(--vl-cartao);color:var(--vl-suave);border:1.5px solid var(--vl-linha);display:inline-flex;align-items:center;gap:7px;transform:rotate(2.5deg);box-shadow:0 6px 12px -8px rgba(0,0,0,.35);white-space:nowrap}
.vl__placa::before{content:"";width:8px;height:8px;border-radius:50%;background:#B8BCC8}
.vl__placa--aberto{color:#0D7F3F;border-color:rgba(18,161,80,.45)}
.vl__placa--aberto::before{background:#12A150;box-shadow:0 0 0 3px rgba(18,161,80,.2)}
.vl[data-tema=noite] .vl__placa--aberto{color:#5BE39A}

.vl__nome{margin:20px 0 0;font-size:38px;line-height:1;font-weight:800;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.vl__nome--longo{font-size:30px}
.vl[data-fonte=forte] .vl__nome{font-weight:900;font-variation-settings:"wdth" 112;letter-spacing:-.035em}
.vl[data-fonte=classica] .vl__nome{letter-spacing:-.02em}
.vl__bio{margin:12px 0 0;color:var(--vl-suave);font-size:16px;text-wrap:pretty;white-space:pre-line;overflow-wrap:anywhere}
.vl__bio--longa{font-size:15px;line-height:1.6}
.vl__horario{justify-self:start;margin:14px 0 0;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--vl-suave);padding:6px 11px 6px 9px;border-radius:999px;background:color-mix(in srgb,var(--vl-texto) 6%,transparent)}
.vl__horario svg{width:15px;height:15px}

.vl__links,.vl__itens{list-style:none;margin:0;padding:0}
.vl__destaque,.vl__links a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;text-decoration:none}
.vl__icone{width:44px;height:44px;border-radius:min(var(--vl-raio),14px);display:grid;place-items:center;background:color-mix(in srgb,var(--vl-cor) 13%,transparent);color:var(--vl-cor)}
.vl__icone svg{width:22px;height:22px}
.vl__seta{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--vl-suave)}
.vl__seta svg{width:14px;height:14px}
.vl__link-texto{display:grid;min-width:0}
.vl__link-texto strong{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.vl__link-texto small{font-size:13px;color:var(--vl-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Featured link: the one thing the owner most wants tapped, in the accent colour with the awning stripe. */
.vl__destaque{position:relative;overflow:hidden;isolation:isolate;margin-top:24px;padding:16px 14px 16px 16px;min-height:80px;border-radius:min(var(--vl-raio),22px);color:var(--vl-sobre-cor)!important;background:var(--vl-cor);
  box-shadow:0 16px 28px -18px color-mix(in srgb,var(--vl-cor) 90%,#000);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.vl__destaque::before{content:"";position:absolute;inset:0 0 0 35%;z-index:-1;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.11) 0 12px,transparent 12px 24px);-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
.vl__destaque:hover{transform:translateY(-2px)}
.vl__destaque:active{transform:scale(.98)}
.vl__destaque .vl__icone{background:color-mix(in srgb,var(--vl-sobre-cor) 20%,transparent);color:inherit}
.vl__destaque strong{font-size:18px}
.vl__destaque small{color:inherit;opacity:.8}
.vl__destaque .vl__seta{background:color-mix(in srgb,var(--vl-sobre-cor) 20%,transparent);color:inherit}
.vl__destaque+.vl__destaque{margin-top:10px}

/* The shelf: a strong top edge, one row per link, the platform in its own colour. */
.vl__links{margin-top:24px;border-top:2.5px solid var(--vl-texto)}
.vl__links li{border-bottom:1px solid var(--vl-linha)}
.vl__links a{min-height:70px;padding:12px 2px;transition:transform .15s,color .15s}
.vl__links a:hover{color:var(--vl-cor);transform:translateX(4px)}
.vl__links a:hover .vl__seta{color:var(--vl-cor)}
.vl__icone[data-marca]{color:#fff}
.vl__icone[data-marca=ig]{background:radial-gradient(circle at 30% 107%,#FDD56A 0%,#FA7E3A 30%,#E1306C 55%,#9B36B7 80%,#515BD4 100%)}
.vl__icone[data-marca=yt]{background:#FF0033}
.vl__icone[data-marca=sp]{background:#1DB954}
.vl__icone[data-marca=zap]{background:#25D366}
.vl__icone[data-marca=lin]{background:#0A66C2}
.vl__icone[data-marca=fb]{background:#1877F2}
.vl__icone[data-marca=tg]{background:#229ED9}
.vl__icone[data-marca=tt],.vl__icone[data-marca=x],.vl__icone[data-marca=th]{background:var(--vl-texto);color:var(--vl-fundo)}

.vl__titulo{margin:38px 0 14px;font-size:23px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.vl[data-fonte=forte] .vl__titulo{font-variation-settings:"wdth" 112}
.vl__itens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vl__itens li:last-child:nth-child(odd){grid-column:1/-1}
.vl__itens a{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:50px 14px 14px;border-radius:min(var(--vl-raio),18px);background:var(--vl-cartao);text-decoration:none;border:1.5px solid var(--vl-linha);transition:border-color .15s,transform .15s}
.vl__itens a:hover{border-color:var(--vl-cor);transform:translateY(-2px)}
/* Price tag hanging from a string tied at the card's top edge. */
.vl__preco{position:absolute;top:14px;left:14px;background:var(--vl-cor);color:var(--vl-sobre-cor);font-weight:800;font-size:15px;line-height:1;padding:6px 11px 6px 19px;border-radius:3px 8px 8px 3px;transform:rotate(-4deg);transform-origin:8px 50%;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis}
.vl__preco::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--vl-cartao)}
.vl__itens a::before{content:"";position:absolute;left:23px;top:-1px;width:1.5px;height:21px;background:var(--vl-suave);opacity:.45;transform:rotate(-24deg);transform-origin:top}
.vl__itens strong{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.vl__desc{font-size:13px;line-height:1.4;color:var(--vl-suave);overflow-wrap:anywhere;white-space:pre-line}
/* A long description reads better at full width: one card per row, the text a little larger. */
.vl__itens--lista{grid-template-columns:minmax(0,1fr)}
.vl__itens--lista strong{font-size:17px}
.vl__itens--lista .vl__desc{font-size:14px;line-height:1.5}
.vl__pedir{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--vl-cor)}
.vl__pedir svg{width:16px;height:16px}

/* Pix: a paper receipt with torn edges. */
.vl__pix{margin-top:30px;display:grid;gap:10px;padding:26px 20px 28px;background:var(--vl-cartao);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x;
  filter:drop-shadow(0 1px 0 var(--vl-linha))}
.vl__pix-topo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.vl__pix-topo svg{width:20px;height:20px;color:#32BCAD}
.vl__pix code{font:600 15px/1.35 var(--vl-fonte);word-break:break-all;padding:12px 0;border-top:1.5px dashed var(--vl-linha);border-bottom:1.5px dashed var(--vl-linha)}
.vl__copiar{border:0;border-radius:min(var(--vl-raio),12px);background:var(--vl-texto);color:var(--vl-fundo);font:700 15px var(--vl-fonte);min-height:46px;padding:0 16px;cursor:pointer;transition:background .15s}
.vl__copiar:hover{background:var(--vl-cor);color:var(--vl-sobre-cor)}
.vl__aviso{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.vl__mapa{margin-top:26px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:min(var(--vl-raio),18px);border:1.5px solid var(--vl-linha);text-decoration:none;font-size:15px}
.vl__mapa>svg{width:44px;height:44px;padding:11px;border-radius:min(var(--vl-raio),14px);background:color-mix(in srgb,var(--vl-cor) 13%,transparent);color:var(--vl-cor)}
.vl__mapa span{min-width:0;font-weight:600;overflow-wrap:anywhere}
.vl__mapa b{font-size:13px;color:var(--vl-cor);white-space:nowrap}
.vl__mapa:hover{border-color:var(--vl-cor)}

.vl__zap{position:sticky;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 40px);max-width:440px;margin:30px auto 0;min-height:56px;padding:0 18px;border-radius:var(--vl-raio);background:#12A150;color:#fff!important;font-weight:700;text-decoration:none;font-size:17px;white-space:nowrap;box-shadow:0 14px 28px -12px rgba(18,161,80,.7),0 0 0 4px color-mix(in srgb,var(--vl-fundo) 70%,transparent);transition:background .15s}
.vl__zap:hover{background:#0D7F3F}
.vl__zap svg{width:22px;height:22px;flex:none}

/* One entrance on first load: the sign board goes up piece by piece. */
@media (prefers-reduced-motion:no-preference){
  .vl--entra .vl__corpo>*,.vl--entra .vl__zap{animation:vl-sobe .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms + 80ms)}
  .vl--entra .vl__capa::after{animation:vl-toldo .5s cubic-bezier(.3,1.4,.5,1) both}
  @keyframes vl-sobe{from{opacity:0;transform:translateY(14px)}}
  @keyframes vl-toldo{from{transform:scaleY(0);transform-origin:top}}
}
@media (prefers-reduced-motion:reduce){.vl *{transition:none!important}}