/* =========================================================
   CSS do VIIA Bio Link no padrão do site da VIIA (agenciaviia.com.br).
   Parte 1: fontes (arquivos próprios em assets/fonts, as mesmas do tema do site).
   Parte 2: subconjunto do assets/css/viia.css do site: só as regras usadas aqui
            (tokens, base, botões, campos, header, hero, rodapé, texto corrido).
   Parte 3 (no fim): o que é próprio do app (entrada, textos legais, marca "bio.link").
   Se o visual do site mudar, regerar as partes 1 e 2 a partir do viia.css.
   ========================================================= */
@font-face{font-family:"Red Hat Display";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/red-hat-display-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Display";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/red-hat-display-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/red-hat-text-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/red-hat-text-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root { interpolate-size: allow-keywords; --paper: #FBFBF9; --surface: #ECEBE5; --line: #E4E3DD; --ink: #0D0D12; --ink-2: #4A4A55; --ink-3: #6B6B76; --brand: #3019B1; --brand-2: #4F46E5; --sky: #0EA5E9; --brand-tint: #EEECFB; --brand-soft: #A9A3F5; --display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif; --text: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif; --max: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); --section: clamp(5rem, 11vw, 9rem); --radius: 14px; --ease: cubic-bezier(.2,.7,.2,1); }
*, ::before, ::after { box-sizing: border-box; }
html { text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0px; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0px; }
em, i { font-style: normal; }
h1, h2, h3 { margin: 0px; font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--brand-tint); color: var(--brand); }
strong { font-weight: 600; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--ink); color: rgb(255, 255, 255); padding: 0.6rem 1rem; border-radius: 8px; z-index: 100; text-decoration: none; }
.skip:focus { top: 1rem; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--ink-2); line-height: 1.55; }
.btn { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; --px: 1.4rem; position: relative; min-height: 52px; padding: .85rem var(--px); border-radius: 999px; border: 1px solid transparent; background: var(--bg); color: var(--fg); font: 600 1rem/1.2 var(--display); text-decoration: none; transition: background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); cursor: pointer; white-space: nowrap; }
.btn svg { position: absolute; right: var(--px); top: 50%; width: 18px; height: 18px; opacity: 0; transform: translate(-6px, -50%); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
.btn:hover svg, .btn:focus-visible svg { opacity: 1; transform: translate(0px, -50%); }
.btn { --edge: color-mix(in srgb,var(--bg) 72%,#000); box-shadow: 0 3px 0 0 var(--edge); }
.btn--ghost { --edge: transparent; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--edge); }
.btn--brand { --bg: var(--brand); }
.btn--brand:hover { --bg: var(--brand-2); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
#header { position: sticky; top: 0px; z-index: 50; background: rgba(251, 251, 249, 0.86); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(13, 13, 18, 0.05); }
.nav-open #header { background: var(--paper); }
.nav { display: grid; grid-template-columns: auto 1fr; align-items: center; height: 72px; gap: 1.5rem; }
.logo { display: inline-flex; color: var(--ink); }
.logo svg { height: 30px; width: auto; }
.nav__links { display: none; gap: 1.4rem; list-style: none; margin: 0px; padding: 0px; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 0.6rem; }
.nav__cta { --px: 1.1rem; min-height: 42px; padding: .6rem var(--px); font-size: 0.92rem; }
.nav__cta:hover { --bg: var(--brand); }
.btn--wa { gap: 0.5rem; }
.btn.btn--wa svg, .btn.btn--wa:hover svg, .btn.btn--wa:focus-visible svg { position: static; flex: 0 0 auto; width: 18px; height: 18px; opacity: 1; transform: none; }
.nav__cta.btn--wa { --px: 1.1rem; padding-inline: var(--px); }
.nav__cta svg.nav__wa { width: 18px; height: 18px; }
@media (min-width: 1101px){
.nav__links { gap: 2.25rem; }
}
.nav__links a { text-decoration: none; font-size: 1rem; font-weight: 500; color: var(--ink); transition: color 0.2s; }
.nav__links > li > a { font-family: var(--display); font-size: 0.92rem; font-weight: 600; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--brand); }
.nav__drop { position: relative; }
.nav__drop-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0px; border: 0px; background: none; cursor: pointer; font: 600 .92rem/1.6 var(--display); color: var(--ink); transition: color 0.2s; }
.nav__drop-btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.nav__drop-btn:hover, .nav__drop-btn.is-current { color: var(--brand); }
.nav__links > li > a, .nav__drop-btn { position: relative; }
.nav__links > li > a::after, .nav__drop-btn::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -4px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: right center; transition: transform 0.3s ease-in-out; }
.nav__links > li > a:is(:hover, :focus-visible)::after, .nav__drop:hover .nav__drop-btn::after, .nav__drop-btn:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.nav__menu { position: absolute; top: calc(100% + 14px); left: 50%; width: 300px; padding: 0.5rem; border: 1px solid var(--line); border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(13, 13, 18, 0.25) 0px 24px 50px -20px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s; }
.nav__menu::before { content: ""; position: absolute; left: 0px; right: 0px; top: -16px; height: 16px; }
.nav__drop:hover .nav__menu, .nav__drop.is-open .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0px); transition-delay: 0s; }
.nav__drop:hover .nav__drop-btn svg, .nav__drop.is-open .nav__drop-btn svg { transform: rotate(180deg); }
.nav__menu a { display: block; padding: 0.75rem 0.9rem; border-radius: 10px; text-decoration: none; transition: background 0.2s; }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: var(--brand-tint); }
.nav__menu strong { display: block; font: 600 .92rem/1.2 var(--display); color: var(--ink); }
.nav__menu span { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--ink-3); }
.nav__brand{display:inline-block;height:.7em;width:auto;vertical-align:baseline;margin-right:.2em;color:var(--ink)} /* logo VIIA no lugar da palavra, no item "VIIA bio.link": mesma altura das maiúsculas do texto ao lado (menu e rodapé) */
.foot .nav__brand{color:inherit} /* no rodapé (fundo escuro) o logo acompanha a cor do link: branco, e destaque no hover */
.nav__panel-label { padding: 0.9rem 0px 0.2rem; font: 600 .75rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.nav__panel .nav__panel-sub a { padding-left: 1rem; }
.nav__panel-sub a span { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--ink-3); }
.nav__toggle { display: inline-flex; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.nav__toggle { gap: 5px; }
.nav__toggle span { flex: 0 0 auto; display: block; width: 2.5px; height: 20px; border-radius: 2px; background: currentcolor; transform: rotate(21.8deg); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav__toggle span:nth-child(1) { transform: translateX(7.5px) rotate(45deg); }
.nav-open .nav__toggle span:nth-child(3) { transform: translateX(-7.5px) rotate(-45deg); }
.nav__panel { display: block; }
.nav__cta { display: none; }
.nav__panel { position: fixed; inset: 72px 0px auto; background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 1.5rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s; }
.nav-open .nav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__panel ul { list-style: none; margin: 0px 0px 1rem; padding: 0px; }
.nav__panel li a { display: block; padding: 0.9rem 0px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 1.125rem; }
.nav__panel { max-height: calc(-72px + 100vh); overflow-y: auto; }
.nav__panel-cta { display: flex; width: 100%; margin-top: 0.25rem; }
@media (min-width: 901px){
.nav { grid-template-columns: 1fr auto 1fr; }
.nav__links { display: flex; }
.nav__toggle { display: none; }
.nav__panel { display: none; }
.nav__cta { display: inline-flex; }
}
.s-hero-home { --hero-pb: clamp(5rem,10vw,8.5rem); position: relative; overflow: hidden; isolation: isolate; margin-top: -72px; padding: calc(72px + clamp(3.5rem,9vw,8rem)) 0 var(--hero-pb); }
.s-hero-home > .wrap { position: relative; z-index: 1; }
.hero__bg { position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 30% 45% at 78% 45%,rgba(109,91,255,.2),transparent 70%),radial-gradient(ellipse 25% 35% at 70% 75%,rgba(56,189,248,.15),transparent 70%),var(--paper); }
.hero__bg.is-live { background: var(--paper); }
.hero__bg canvas { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; mask-image: radial-gradient(100% 48% at 70% 54%, rgb(0, 0, 0) 30%, transparent 100%); }
@media (min-width: 901px){
.hero__bg canvas { mask-image: radial-gradient(38% 62% at 76% 52%, rgb(0, 0, 0) 30%, transparent 100%); }
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.hero__title { font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; }
.hero__sub { display: block; margin-top: clamp(1rem, 2vw, 1.25rem); font: 500 clamp(1.25rem,2vw,1.6rem)/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); max-width: 26ch; }
.hero__text { margin-top: clamp(1.75rem, 3vw, 2.25rem); max-width: 32rem; }
@media (min-width: 901px){
.hero__grid { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
}
#footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0px 2rem; font-size: 0.95rem; }
.foot { display: grid; grid-template-columns: repeat(10, minmax(0px, 1fr)); gap: 2rem; }
.foot .logo svg { height: 24px; }
.foot__tagline { margin-top: 1rem; max-width: 18rem; color: var(--ink-2); font: 500 1.05rem/1.4 var(--display); letter-spacing: -0.01em; }
.foot__ct { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); }
.foot__ct svg { width: 20px; height: 20px; flex: 0 0 auto; }
.foot .foot__ct:hover { background: var(--brand-soft); color: rgb(13, 13, 18); }
.foot ul:has(.foot__ct) { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
.foot__local { margin-top: 0.9rem; color: var(--ink-3); font-size: 0.9rem; line-height: 1.5; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: var(--brand); }
.foot h2 { font: 600 .8rem/1 var(--display); letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 1.1rem; }
.foot ul { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 0.65rem; }
.foot a { text-decoration: none; color: var(--ink-2); }
.foot a:hover { color: var(--brand); }
.foot__bottom { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--ink-3); font-size: 0.75rem; }
.foot__bottom::before { content: ""; position: absolute; top: 0px; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--line); }
.foot { gap: 2.5rem 0px; }
.foot > .foot__brand { grid-area: 1 / 1 / auto / span 10; padding-right: 1.25rem; }
.foot > :nth-child(2) { grid-area: 2 / 1 / auto / span 5; padding-right: 1.25rem; }
.foot > :nth-child(3) { grid-area: 2 / 6 / auto / span 5; }
.foot__legal { order: -1; }
@media (min-width: 801px){
.foot { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.foot__ct { width: 48px; height: 48px; border-radius: 12px; }
.foot__ct svg { width: 24px; height: 24px; }
.foot ul:has(.foot__ct) { flex-wrap: wrap; gap: 0.6rem; }
.foot > .foot__brand { grid-area: auto; padding-right: 0px; }
.foot > :nth-child(2) { grid-area: auto; padding-right: 0px; }
.foot > :nth-child(3) { grid-area: auto; }
.foot__legal { order: 0; }
}
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label, .field legend { font: 600 .9rem/1.2 var(--display); color: var(--ink); }
.field input, .field textarea { min-width: 0px; width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; min-height: 52px; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 4px var(--brand-tint); }
@media (prefers-reduced-motion: reduce){
html { scroll-behavior: auto; }
*, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
main > section:not(.sec--dark, .s-filosofia) + section:not(.sec--dark, .s-filosofia, .s-cta) { padding-top: clamp(1rem, 2.2vw, 2rem); }
#footer { --ink: #fff; --ink-2: rgba(255,255,255,.72); --ink-3: rgba(255,255,255,.5); --line: rgba(255,255,255,.12); --brand: var(--brand-soft); background: rgb(13, 13, 18); color: rgb(255, 255, 255); border-top: 0px; }
.s-blog-hero { padding: clamp(3rem, 6vw, 4.5rem) 0px clamp(2rem, 4vw, 2.75rem); }
.blog-hero__title { font: 700 clamp(2rem,3.6vw,3.2rem)/1.05 var(--display); letter-spacing: -0.04em; }
.prose { font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.25em; }
.prose__intro { font-size: 1.3rem; line-height: 1.6; color: var(--ink); }
.prose h2 { margin-top: 2.2em; font: 700 clamp(1.5rem,2.4vw,1.95rem)/1.2 var(--display); letter-spacing: -0.025em; color: var(--ink); scroll-margin-top: 110px; }
.prose h2 + p { margin-top: 0.8em; }
.prose a { color: var(--brand); text-decoration: underline 1px; text-underline-offset: 0.2em; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose ul li::marker { color: var(--brand); }
.legal .prose { font-size: 0.9375rem; line-height: 1.7; }
.legal .prose__intro { font-size: 1.0625rem; line-height: 1.6; }
.legal .prose h2 { margin-top: 2em; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.legal-hero { padding-bottom: 0.5rem; }
.legal-hero + section .legal { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.legal .prose ul { padding-left: 1.2em; }
.legal .prose li + li { margin-top: 0.4em; }
:is(a, button, summary, label, input, textarea, select, [role="button"], .btn, .link, .chips span, .carousel__btn, .qa__ic, .blog-topic, .blog-filter button):not(.reveal) { transition-property: color, background-color, background, border-color, box-shadow, opacity, transform, text-decoration-color, fill, stroke, padding-right !important; transition-duration: 0.3s !important; transition-timing-function: ease-in-out !important; }
@keyframes fill { 
  0% { transform: scaleX(0); }
}

/* =========================================================
   VIIA Link — páginas de entrada (cadastro, login, nova senha) e textos legais.
   Usa os tokens e o hero do site acima; aqui só o que é próprio do app.
   ========================================================= */
.s-hero-auth{--hero-pb:clamp(3.5rem,8vw,6rem)}
.auth-points{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.7rem;color:var(--ink-2)}
.auth-points li{position:relative;padding-left:1.9rem}
.auth-points li::before{content:"//";position:absolute;left:0;top:0;font:700 1rem/1.6 var(--display);letter-spacing:-.05em;color:var(--brand)}
.auth-card{width:100%;max-width:30rem;justify-self:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 1px 0 rgba(13,13,18,.03),0 30px 60px -30px rgba(48,25,177,.22)}
.auth-tabs{display:flex;gap:.25rem;padding:.35rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;margin-bottom:1.25rem}
.auth-tabs[hidden]{display:none}
.auth-tab{flex:1;min-height:42px;border:0;border-radius:999px;background:none;font:600 .95rem/1 var(--display);color:var(--ink-3);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.auth-tab:hover{color:var(--ink)}
.auth-tab.is-on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(13,13,18,.06)}
.auth-panel{display:none}
.auth-panel.is-on{display:block}
.auth-submit{width:100%;margin-top:.5rem}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-check{display:flex;gap:.65rem;align-items:flex-start;margin:.25rem 0 1rem;font-size:.9rem;line-height:1.45;color:var(--ink-2);cursor:pointer}
.auth-check input{flex:none;width:18px;height:18px;margin-top:.2rem;accent-color:var(--brand)}
.auth-check a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.auth-link{display:block;margin:1rem auto 0;padding:.5rem;background:none;border:0;font:600 .95rem/1.2 var(--display);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-link:hover{color:var(--brand)}
.auth-help{margin:0 0 1rem;font-size:.95rem;color:var(--ink-2)}
.auth-done__title{margin:0 0 1rem;font:700 clamp(1.6rem,6vw,2.1rem)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.auth-tip{margin:0 0 1rem;padding:.9rem 1rem;background:var(--brand-tint);border-radius:12px;font-size:.92rem;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.auth-tip strong{color:var(--ink)}
/* Campo "Seu link": mostra viiabio.link/ fixo antes do que a pessoa digita (o username é o endereço da página). */
.field--link{gap:.45rem}
.field-link__url{margin:0;font-size:.92rem;color:var(--ink-2);overflow-wrap:anywhere}
.field-link__url strong{color:var(--ink)}
.field-link__group{display:flex;align-items:stretch;min-width:0}
.field-link__prefix{display:flex;align-items:center;flex:none;padding:0 .75rem;background:var(--brand-tint);border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;font:600 .95rem/1 var(--display);color:var(--ink-2)}
.field .field-link__group input{border-radius:0 12px 12px 0;flex:1 1 auto}
.field--link small{color:var(--ink-3);font-size:.82rem;line-height:1.4}
.auth-msg{margin-bottom:1rem;padding:.8rem 1rem;border-radius:12px;background:#FEF2F2;color:#991B1B;font-size:.92rem;line-height:1.45}
.auth-msg.ok{background:#F0FDF4;color:#166534}
.auth-msg a{color:inherit;font-weight:600;text-decoration:underline}
/* ===== Home do VIIA bio.link (abaixo do hero): vitrine, recursos, passos, planos, perguntas e chamada final. Mobile first. ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.home-hero-link{margin:1.5rem 0 0}
.home-showcase,.home-features,.home-steps,.home-plans,.home-faq,.home-final{padding:clamp(3rem,8vw,6rem) 0;scroll-margin-top:72px}
.home-features,.home-plans{background:#fff;border-block:1px solid var(--line)}
.home-title{margin:0;font-size:clamp(1.8rem,4.2vw,2.8rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;max-width:22ch}
.home-lead{margin:1rem 0 0;max-width:38rem;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.55;color:var(--ink-2)}
.home-cta{margin:2rem 0 0}
/* vitrine: celular no centro e cartões em volta (no celular, em grade embaixo) */
.home-stage{position:relative;margin:2.5rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.home-phone{grid-column:1/-1;justify-self:center;width:min(15rem,70%);aspect-ratio:9/16;max-height:26rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.4rem 1rem;border-radius:2rem;background:linear-gradient(180deg,#C7C2FA,#EEECFB 55%);border:6px solid var(--ink);box-shadow:0 30px 60px -30px rgba(48,25,177,.4)}
.home-phone__avatar{width:4rem;height:4rem;border-radius:50%;background:var(--brand)}
.home-phone__name{width:55%;height:.7rem;border-radius:999px;background:var(--ink-2);opacity:.6}
.home-phone__btn{width:100%;height:2.4rem;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.home-phone__dots{display:flex;gap:.5rem;margin-top:auto}
.home-phone__dots i{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brand)}
.home-float{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 30px -18px rgba(13,13,18,.3);font-size:.9rem;color:var(--ink-2)}
.home-float strong{font:700 .95rem/1.2 var(--display);color:var(--ink)}
.home-float--wa{background:#E7F8EE;border-color:#BFE9CF}
.home-float--shop strong+span{font:700 1.15rem/1 var(--display);color:var(--brand)}
.home-float--map{background:#F1F5F9}
.home-bars{display:flex;align-items:flex-end;gap:.3rem;height:2.2rem}
.home-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--brand-2)}
.home-bars i:nth-child(1){height:35%}.home-bars i:nth-child(2){height:55%}.home-bars i:nth-child(3){height:45%}.home-bars i:nth-child(4){height:80%}.home-bars i:nth-child(5){height:100%}
.home-qr{width:2.6rem;height:2.6rem;border-radius:4px;background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/.65rem .65rem;border:3px solid var(--ink)}
.home-stage__note{grid-column:1/-1;text-align:center;font-size:.82rem;color:var(--ink-3)}
@media (min-width:900px){
  .home-stage{display:block;height:34rem;margin-top:3rem}
  .home-phone{position:absolute;left:50%;top:0;transform:translateX(-50%);width:15rem;max-height:none;height:33rem}
  .home-float{position:absolute;width:12rem}
  .home-float--wa{left:6%;top:12%}.home-float--map{left:16%;top:46%}.home-float--shop{left:2%;top:78%}
  .home-float--stats{right:6%;top:10%}.home-float--qr{right:15%;top:44%}.home-float--media{right:3%;top:76%}
  .home-stage__note{position:absolute;left:0;right:0;bottom:-1.5rem}
}
/* recursos: uma linha por grupo, painel colorido com celular (layout do Keepo). Celular: painel em cima e texto embaixo */
.home-features__list{display:grid;gap:clamp(2.5rem,7vw,5rem);margin-top:2.5rem}
.home-feature{display:grid;gap:1.5rem;align-items:center}
.home-feature__panel{order:-1;display:flex;justify-content:center;align-items:flex-end;height:clamp(15rem,60vw,22rem);overflow:hidden;border-radius:28px;background:var(--tint,#ECEBE5)}
.home-feature--rose{--tint:#FDE4E4}.home-feature--sun{--tint:#FFF6C7}.home-feature--sky{--tint:#DCEEFB}.home-feature--mint{--tint:#DDF4E6}.home-feature--lilac{--tint:#E8E5FB}.home-feature--gray{--tint:#ECEBE5}
.home-feature__phone{width:min(14rem,62%);height:92%;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.6rem .9rem 0;border:6px solid var(--ink);border-bottom:0;border-radius:2rem 2rem 0 0;background:#fff}
.home-feature__text{display:grid;gap:.9rem;justify-items:start}
.home-feature h3{margin:0;font:700 clamp(1.8rem,4vw,2.6rem)/1.05 var(--display);letter-spacing:-.035em}
.home-feature p{margin:0;max-width:30rem;font-size:1.05rem;line-height:1.55;color:var(--ink-2)}
.home-tag{padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;font:700 .72rem/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.home-tag--pro{border-color:var(--brand-soft);color:var(--brand)}
@media (min-width:900px){
  .home-feature{grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,5rem)}
  .home-feature__panel{order:0;height:26rem}
  .home-feature:nth-child(even) .home-feature__text{order:2}
}
/* desenhos dentro do celular */
.mk-avatar{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--brand)}
.mk-btn{flex:none;width:100%;padding:.6rem;border-radius:999px;background:var(--surface);font:600 .8rem/1.2 var(--display);text-align:center;color:var(--ink)}
.mk-btn--wa{background:#25D366;color:#fff}
.mk-icons{display:flex;gap:.5rem}
.mk-icons i,.mk-dots i{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ink)}
.mk-dots{display:flex;gap:.5rem}.mk-dots i{background:var(--brand)}
.mk-map{position:relative;flex:none;width:100%;height:6rem;border-radius:12px;background:linear-gradient(135deg,#DCEEFB,#BFE0F7)}
.mk-map b{position:absolute;left:50%;top:50%;width:1rem;height:1rem;margin:-.5rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#E11D48}
.mk-bars{display:flex;align-items:flex-end;gap:.35rem;flex:none;width:100%;height:5rem}
.mk-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--brand-2)}
.mk-bars i:nth-child(1){height:30%}.mk-bars i:nth-child(2){height:55%}.mk-bars i:nth-child(3){height:45%}.mk-bars i:nth-child(4){height:80%}.mk-bars i:nth-child(5){height:100%}
.mk-qr{flex:none;width:4.5rem;height:4.5rem;border:3px solid var(--ink);background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/.9rem .9rem}
.mk-card{display:flex;flex-direction:column;gap:.4rem;flex:none;width:100%;padding:.5rem;border:1px solid var(--line);border-radius:12px}
.mk-card i{height:3.2rem;border-radius:8px;background:var(--brand-tint)}
.mk-card b{font:700 .85rem/1 var(--display);color:var(--brand)}
.mk-card--dash{border-style:dashed;align-items:center;padding:.9rem}
.mk-card--dash b{color:var(--ink-2)}
.mk-video{position:relative;flex:none;width:100%;height:5.5rem;border-radius:12px;background:var(--ink)}
.mk-video b{position:absolute;left:50%;top:50%;margin:-.6rem 0 0 -.4rem;border:.6rem solid transparent;border-left:1rem solid #fff}
.mk-audio{flex:none;width:100%;height:2rem;border-radius:999px;background:#1DB954;position:relative}
.mk-audio i{position:absolute;left:.7rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;border-radius:50%;background:#fff}
.mk-line{flex:none;width:100%;height:.6rem;border-radius:999px;background:var(--line)}.mk-line--s{width:60%;align-self:flex-start}
.mk-url{flex:none;width:100%;padding:.45rem .6rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:600 .72rem/1.2 var(--display);text-align:center;color:var(--ink-2);white-space:nowrap}
/* passos */
.home-steps__list{list-style:none;counter-reset:passo;margin:2rem 0 0;padding:0;display:grid;gap:1rem}
.home-steps__list li{counter-increment:passo;display:grid;gap:.4rem;padding:1.25rem 1.25rem 1.25rem 4rem;position:relative;background:#fff;border:1px solid var(--line);border-radius:16px}
.home-steps__list li::before{content:counter(passo);position:absolute;left:1.25rem;top:1.2rem;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font:700 1rem/1 var(--display)}
.home-steps__list strong{font:700 1.15rem/1.2 var(--display)}
.home-steps__list span{color:var(--ink-2);line-height:1.5}
@media (min-width:800px){.home-steps__list{grid-template-columns:repeat(3,1fr)}}
/* planos */
.home-plans__grid{display:grid;gap:1rem;margin:2rem auto 0}
.home-plan{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--paper);border:1px solid var(--line);border-radius:20px}
.home-plan--pro{border-color:var(--brand);box-shadow:0 30px 60px -36px rgba(48,25,177,.4)}
.home-plan h3{margin:0;font:700 1.3rem/1.2 var(--display)}
.home-plan__price{margin:0;font:700 2.4rem/1 var(--display);letter-spacing:-.03em}
.home-plan__price small{font:500 1rem/1 var(--display);color:var(--ink-3)}
.home-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--ink-2)}
.home-plan li{position:relative;padding-left:1.6rem;line-height:1.45}
.home-plan li::before{content:"//";position:absolute;left:0;font:700 .95rem/1.5 var(--display);color:var(--brand)}
.home-plan .btn{margin-top:auto}
.home-plan__note{color:var(--ink-3);font-size:.85rem;line-height:1.4}
@media (min-width:760px){.home-plans__grid{grid-template-columns:1fr 1fr;max-width:46rem}}
/* perguntas */
.home-faq__list{margin:2rem auto 0;display:grid;gap:.6rem;max-width:46rem}
.home-faq__item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 1.1rem}
.home-faq__item summary{cursor:pointer;list-style:none;padding:1rem 0;font:700 1.05rem/1.35 var(--display);display:flex;justify-content:space-between;gap:1rem}
.home-faq__item summary::-webkit-details-marker{display:none}
.home-faq__item summary::after{content:"+";flex:none;font-size:1.3rem;line-height:1;color:var(--brand)}
.home-faq__item[open] summary::after{content:"\2212"}
.home-faq__item p{margin:0 0 1.1rem;color:var(--ink-2);line-height:1.55}
.home-faq__item a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.home-final{text-align:center}.home-final .home-title,.home-final .home-lead{margin-inline:auto}
/* home: desenhos novos (horário, preços, Pix, promoção, galeria) e seção "para quem" */
.mk-status{display:flex;align-items:center;gap:.4rem;flex:none;width:100%;font:700 .78rem/1 var(--display);color:#16A34A}
.mk-status i{width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.mk-row{display:flex;justify-content:space-between;gap:.4rem;flex:none;width:100%;font-size:.7rem;line-height:1.2;color:var(--ink-2)}
.mk-row b{font-weight:700;color:var(--ink)}.mk-row em{font-style:normal}
.mk-price{display:flex;align-items:baseline;gap:.25rem;flex:none;width:100%;font-size:.72rem;line-height:1.2}
.mk-price i{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-3px)}
.mk-price b{font-weight:700;color:var(--ink);white-space:nowrap}
.mk-btn--ok{background:#DCFCE7;color:#166534}
.mk-card--tight{gap:.3rem}.mk-card--tight em{font-style:normal;font-size:.7rem;color:var(--ink-2)}
.mk-cupom{display:flex;justify-content:center;gap:.3rem;padding:.35rem;border:2px dashed var(--ink-3);border-radius:8px;font-size:.7rem;color:var(--ink-2)}
.mk-cupom b{color:var(--ink);letter-spacing:.04em}
.mk-foto{position:relative;flex:none;width:100%;height:6.5rem;border-radius:12px;background:linear-gradient(135deg,#BFE0F7,#C7C2FA)}
.mk-foto u{position:absolute;top:50%;width:1.5rem;height:1.5rem;margin-top:-.75rem;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:1rem;line-height:1;text-decoration:none}
.mk-foto u:first-child{left:.4rem}.mk-foto u:last-child{right:.4rem}
.home-float .home-ok{color:#16A34A;font-weight:700}
.home-who{padding:clamp(3rem,8vw,6rem) 0}
.home-who__grid{display:grid;gap:.9rem;margin-top:2rem}
.home-who__card{padding:1.25rem;background:#fff;border:1px solid var(--line);border-radius:16px}
.home-who__card h3{margin:0 0 .7rem;font:700 1.1rem/1.25 var(--display);letter-spacing:-.02em}
.home-who__card ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;color:var(--ink-2)}
.home-who__card li{position:relative;padding-left:1.5rem;line-height:1.4}
.home-who__card li::before{content:"//";position:absolute;left:0;font:700 .9rem/1.5 var(--display);color:var(--brand)}
@media (min-width:640px){.home-who__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.home-who__grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){
  .home-float--wa{left:6%;right:auto;top:6%}.home-float--map{left:14%;right:auto;top:30%}.home-float--shop{left:4%;right:auto;top:54%}.home-float--stats{left:14%;right:auto;top:78%}
  .home-float--hora{right:6%;left:auto;top:6%}.home-float--pix{right:14%;left:auto;top:30%}.home-float--cupom{right:4%;left:auto;top:54%}.home-float--media{right:14%;left:auto;top:78%}
}
  .home-float--hora{right:6%;top:6%}.home-float--pix{right:14%;top:30%}.home-float--cupom{right:4%;top:54%}.home-float--media{right:14%;top:78%}
}
/* textos legais: tabela de cookies */
.prose__table-wrap{overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem}
.prose th,.prose td{padding:.65rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-family:var(--display);color:var(--ink)}
.prose code{padding:.1em .35em;border-radius:6px;background:var(--surface);font-size:.9em;color:var(--ink)}

/* marca do app ao lado do logo da VIIA */
.logo{text-decoration:none}
.logo__sub{align-self:center;margin-left:.55rem;color:var(--ink-2);font:600 1.05rem/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
/* header do editor logado: só logo + ações, em qualquer largura */
.nav.nav--app{grid-template-columns:auto 1fr}
.nav--app .nav__cta{display:inline-flex}
@media (max-width:520px){.nav--app .nav__more{display:none}.nav--app .nav__cta{--px:.9rem;font-size:.88rem}}
/* tutoriais de DNS (páginas /tutorial-*) */
.prose ol{padding-left:1.4em}
.prose ol li::marker{font-family:var(--display);font-weight:700;color:var(--brand)}
.prose code{overflow-wrap:anywhere}
.tut-img{display:block;max-width:100%;height:auto;margin-top:.75rem;border:1px solid var(--line);border-radius:12px}