*{box-sizing:border-box;margin:0}
html{min-height:100%}
body{min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--txt);-webkit-font-smoothing:antialiased}
body.has-bg::before{content:"";position:fixed;inset:0;background-size:cover;background-position:center;z-index:-2}
body.has-bg::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:-1}
main{max-width:480px;margin:0 auto;padding:48px 20px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center}
.avatar{width:var(--av,96px);height:var(--av,96px);object-fit:cover;border:3px solid color-mix(in srgb,var(--txt) 35%,transparent);margin-bottom:14px;background:color-mix(in srgb,var(--txt) 15%,transparent);border-radius:50%}
.avatar.av-rounded{border-radius:22%}.avatar.av-square{border-radius:6px}.avatar.fit-contain{object-fit:contain;background:#fff;padding:4px}
h1{font-size:1.35rem;font-weight:700;overflow-wrap:anywhere}
.bio{margin-top:6px;opacity:.85;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 6px}
.socials a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--txt) 14%,transparent);transition:transform .15s}
.socials a:hover{transform:translateY(-2px)}
.ic{width:20px;height:20px;background:var(--txt);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.links{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.links a{display:block;padding:16px 20px;font-weight:600;font-size:1rem;text-decoration:none;color:var(--ct,var(--btn-txt));background:var(--c,var(--btn));transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px rgba(0,0,0,.18);overflow-wrap:anywhere}
.links a:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.links a:active{transform:scale(.98)}
.st-pill a{border-radius:999px}.st-round a{border-radius:14px}.st-square a{border-radius:0}
.st-outline a{border-radius:14px;background:transparent;color:var(--txt);border:2px solid var(--c,var(--txt));box-shadow:none}
.hero{display:flex;flex-direction:column;align-items:center;width:100%}
.who{min-width:0;max-width:100%}
/* Neon: contorno luminoso na cor do botão escolhida pelo cliente; a 2ª cor (--btn2, derivada dela) alterna nos cartões */
.st-neon a{--a:var(--c,var(--btn));background:color-mix(in srgb,var(--a) 7%,transparent);color:var(--txt);border:2px solid var(--a);border-radius:14px;
  box-shadow:0 0 12px color-mix(in srgb,var(--a) 50%,transparent),inset 0 0 12px color-mix(in srgb,var(--a) 16%,transparent)}
.st-neon a:nth-child(even){--a:var(--c,var(--btn2))}
.st-neon a:hover{box-shadow:0 0 20px color-mix(in srgb,var(--a) 75%,transparent),inset 0 0 14px color-mix(in srgb,var(--a) 24%,transparent)}
.st-neon .lic{background:var(--a)}
/* Vidro: botões translúcidos com desfoque do fundo; a cor própria (--c) tinge o vidro */
.st-glass a{border-radius:18px;color:var(--txt);background:color-mix(in srgb,var(--c,var(--txt)) 16%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--txt)) 42%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.28)}
.st-glass a:hover{background:color-mix(in srgb,var(--c,var(--txt)) 26%,transparent)}
/* Grade: cabeçalho com foto ao lado do nome e botões em duas colunas, ícone em cima do texto */
.lay-grade{max-width:520px}
.lay-grade .hero{flex-direction:column;align-items:center;gap:6px;text-align:center}
.lay-grade .avatar{margin:0;flex:none}
.lay-grade h1{font-size:1.25rem}
.lay-grade .bio{margin-top:4px;font-size:.88rem}
.lay-grade .socials{justify-content:center;align-self:center;margin:16px 0 0}
.lay-grade .links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.lay-grade .links a,.lay-grade .links a.has-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:14px 10px;text-align:center;font-size:.92rem;line-height:1.25}
.lay-grade .lw{position:static;margin:0;flex:none;width:28px;height:28px}
.lay-grade .st-pill a{border-radius:22px}
/* Marca do plano Starter: "Feito com Vynio" com a logo e um convite para criar a própria página (some nos planos Pro e Business) */
.brand{margin-top:32px;width:100%;display:flex;justify-content:center}
.brand-link{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:6px 13px 6px 8px;border-radius:999px;color:var(--txt);text-decoration:none;
  background:color-mix(in srgb,var(--txt) 9%,transparent);border:1px solid color-mix(in srgb,var(--txt) 22%,transparent);transition:transform .15s,background .15s}
.brand-link:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--txt) 15%,transparent)}
.brand-link svg{flex:none;width:26px;height:26px}
.brand-link span{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2;font-size:.78rem}
.brand-link small{display:block;font-size:inherit;white-space:nowrap}.brand-link em{white-space:nowrap}.brand-link b{font-weight:700}.brand-link em{font-style:normal;opacity:.8;font-size:.7rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.links a.has-ic{position:relative;padding-left:56px;padding-right:56px}
.lw{position:absolute;left:18px;top:50%;width:24px;height:24px;margin-top:-12px;display:grid;place-items:center;border-radius:9px}
.lic{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}

/* "Cada botão com uma cor" em estilos que NÃO são Neon: base neutra e a cor da marca só no ícone (recipiente colorido, glifo na cor de maior contraste) */
.tile.st-glass a{background:var(--glass,color-mix(in srgb,var(--txt) 16%,transparent));border-color:var(--glass-bd,color-mix(in srgb,var(--txt) 42%,transparent))}
.tile.st-outline a{border-color:var(--txt)}
.tile.st-pill a,.tile.st-round a,.tile.st-square a{background:var(--btn);color:var(--btn-txt)}
.tile .lw{left:12px;width:32px;height:32px;margin-top:-16px;background:var(--cg,var(--c,color-mix(in srgb,currentColor 18%,transparent)))}
.tile .lw.img{background:#fff}
.tile .lic{width:20px;height:20px;background:var(--ct,currentColor)}
.tile a.has-ic{padding-left:56px}
.lay-grade .tile .lw,.lay-grade.tile .lw{width:38px;height:38px}
.lay-grade .tile .lic,.lay-grade.tile .lic{width:24px;height:24px}
/* Vidro sobre fundo animado (cores vêm do servidor: --glass / --glass-bd) */
.st-glass a{background:var(--glass,color-mix(in srgb,var(--c,var(--txt)) 16%,transparent));border:1px solid var(--glass-bd,color-mix(in srgb,var(--c,var(--txt)) 42%,transparent))}
/* Fundo ANIMADO: manchas de cor (--m1..--m4, paleta fechada com contraste garantido) derivam devagar atrás do conteúdo */
.fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--fx-base)}
.fx .blob{position:absolute;width:78vmax;max-width:900px;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.92;will-change:transform}
.fx .b1{left:-25%;top:-15%;background:var(--m1);animation:fx1 calc(13s * var(--vel,1)) ease-in-out infinite alternate}
.fx .b2{right:-30%;top:10%;background:var(--m2);animation:fx2 calc(16s * var(--vel,1)) ease-in-out infinite alternate}
.fx .b3{left:-15%;bottom:-25%;background:var(--m3);animation:fx3 calc(15s * var(--vel,1)) ease-in-out infinite alternate}
.fx .b4{right:-25%;bottom:-15%;background:var(--m4);animation:fx4 calc(18s * var(--vel,1)) ease-in-out infinite alternate}
@keyframes fx1{to{transform:translate(75%,55%) scale(1.3)}}
@keyframes fx2{to{transform:translate(-80%,70%) scale(.8)}}
@keyframes fx3{to{transform:translate(80%,-65%) scale(1.25)}}
@keyframes fx4{to{transform:translate(-70%,-75%) scale(1.35)}}
.fx-pausa .blob{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.fx .blob{animation-play-state:paused!important}}
@media (max-width:600px){.fx .blob{filter:blur(40px)}}

/* Link em DESTAQUE (Featured): cartão grande com a imagem do link em cima e o título embaixo; vale para Lista e Grade (ocupa a linha toda) */
.links a.feat{display:block;padding:0;overflow:hidden;border-radius:20px;text-align:left}
.links a.feat .th{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:color-mix(in srgb,currentColor 10%,transparent)}
.links a.feat .th.ph{display:grid;place-items:center}
.links a.feat .th.ph .lic{width:46px;height:46px;position:static;margin:0;background:currentColor;opacity:.85}
.links a.feat .ft{display:block;padding:12px 16px 14px;font-weight:700;font-size:.98rem;overflow-wrap:anywhere}
.lay-grade .links a.feat{grid-column:1/-1;min-height:0;display:block;padding:0;text-align:left}
.st-glass a.feat{backdrop-filter:blur(12px)}
.st-outline a.feat{border-radius:20px}

/* Grade + "cor da marca no ícone": o recipiente do ícone volta ao fluxo normal (a margem negativa da Lista puxava o ícone e o texto para cima) */
.lay-grade .tile .lw{margin:0;left:auto;top:auto}
/* "Ver animação" no editor: força o movimento na prévia mesmo com "reduzir movimento" ligado no sistema */
html.fx-forca .fx .blob{animation-play-state:running!important}
/* Foto em estilo HERO (Pro): imagem larga no topo que se dissolve em degradê na cor/animação do fundo; o nome fica sobre a parte dissolvida */
.hero-foto{display:block;position:relative;z-index:0;width:calc(100% + 40px);margin:-48px -20px 0}
.hero-foto img{display:block;width:100%;aspect-ratio:1/1;max-height:64vh;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.6) 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.6) 74%,transparent 100%)}
.hero-foto + .who{position:relative;z-index:1;margin-top:-72px;text-shadow:0 2px 16px rgba(0,0,0,.28)}
.lay-grade .hero-foto{margin-bottom:0}

/* Logo PARTICULAR do botão (imagem enviada): no lugar do glifo da marca; sobre recipiente branco no modo "cor da marca no ícone" */
.lw.img .lic-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}
.lw.img{overflow:hidden}
/* EFEITOS do fundo animado (além de "manchas"): AURORA BOREAL e ONDAS DO MAR. Usam as mesmas 4 cores da paleta do tema (contraste já garantido) e --vel (velocidade). */
.fx.e-aurora .blob{width:44%;max-width:none;height:130%;aspect-ratio:auto;top:-20%;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;filter:blur(34px);opacity:.92;transform-origin:50% 100%;
  background:linear-gradient(to top,transparent 0,var(--m) 32%,var(--m) 62%,transparent 100%)}
.fx.e-aurora .b1{--m:var(--m1);left:-6%;animation:au1 calc(11s * var(--vel,1)) ease-in-out infinite alternate}
.fx.e-aurora .b2{--m:var(--m2);left:20%;animation:au2 calc(14s * var(--vel,1)) ease-in-out infinite alternate}
.fx.e-aurora .b3{--m:var(--m3);left:46%;animation:au3 calc(12s * var(--vel,1)) ease-in-out infinite alternate}
.fx.e-aurora .b4{--m:var(--m4);left:68%;animation:au4 calc(15s * var(--vel,1)) ease-in-out infinite alternate}
@keyframes au1{0%{transform:translateX(-4%) skewX(-10deg) scaleY(.8)}100%{transform:translateX(26%) skewX(12deg) scaleY(1.12)}}
@keyframes au2{0%{transform:translateX(10%) skewX(8deg) scaleY(1.05)}100%{transform:translateX(-24%) skewX(-12deg) scaleY(.78)}}
@keyframes au3{0%{transform:translateX(-14%) skewX(-6deg) scaleY(.9)}100%{transform:translateX(22%) skewX(14deg) scaleY(1.15)}}
@keyframes au4{0%{transform:translateX(12%) skewX(10deg) scaleY(1.1)}100%{transform:translateX(-26%) skewX(-8deg) scaleY(.82)}}
.fx.e-ondas .blob{top:auto;right:auto;left:-70%;width:240%;max-width:none;height:72%;aspect-ratio:auto;border-radius:46% 54% 0 0/100% 100% 0 0;filter:blur(7px);opacity:.96}
.fx.e-ondas .b1{background:var(--m1);bottom:-22%;animation:on1 calc(17s * var(--vel,1)) ease-in-out infinite alternate}
.fx.e-ondas .b2{background:var(--m2);bottom:-34%;animation:on2 calc(13s * var(--vel,1)) ease-in-out infinite alternate}
.fx.e-ondas .b3{background:var(--m3);bottom:-46%;animation:on3 calc(15s * var(--vel,1)) ease-in-out infinite alternate}
.fx.e-ondas .b4{background:var(--m4);bottom:-58%;animation:on4 calc(11s * var(--vel,1)) ease-in-out infinite alternate}
@keyframes on1{0%{transform:translate(-8%,0) rotate(-1.4deg)}100%{transform:translate(10%,-7%) rotate(1.6deg)}}
@keyframes on2{0%{transform:translate(10%,-4%) rotate(1.2deg)}100%{transform:translate(-9%,5%) rotate(-1.5deg)}}
@keyframes on3{0%{transform:translate(-6%,3%) rotate(-1deg)}100%{transform:translate(12%,-6%) rotate(1.8deg)}}
@keyframes on4{0%{transform:translate(9%,0) rotate(1.4deg)}100%{transform:translate(-10%,-5%) rotate(-1.2deg)}}
@media (max-width:600px){.fx.e-aurora .blob{filter:blur(26px)}}