/* DigitAgrela v3: componentes do novo design (home e Planos), em cima do theme.css.
   Tudo com prefixo v- para não chocar com as classes antigas que as outras páginas ainda usam. */
:root {
  --brand-soft: #F7E3D9;
  --brand-rgb: 193 80 46;
  --brand-light: #F2A98C;
  --brand-2: #E07A52;
  --on-brand: #FFFFFF;
  --hero-bg: #3A2F29;
  --on-dark: #F6EFE6;
  --on-dark-muted: #CDBFB1;
  --wa: #18773F;
}

/* ---------- Base das secções ---------- */
.v-section { padding: 64px 0; }
.v-tint { background: var(--tint); }
.v-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-dark); margin: 0 0 12px; }
.v-head { max-width: 680px; margin-bottom: 32px; }
.v-head h2 { font-size: clamp(28px, 4vw, 40px); text-wrap: balance; }
.v-head p { color: var(--muted); margin: 12px 0 0; font-size: 17px; }
.v-lead { font-size: 17.5px; color: var(--muted); margin: 16px 0 22px; max-width: 34em; }

/* ---------- Botões ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .15s ease, background .15s ease, color .15s ease; }
.v-btn svg { width: 20px; height: 20px; flex: none; }
.v-btn-wa { background: var(--brand); color: var(--on-brand); box-shadow: 0 10px 22px -12px rgb(var(--brand-rgb) / .8); }
.v-btn-wa:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.v-btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.v-btn-line:hover { background: var(--ink); color: var(--bg); }
.v-btn-light { background: var(--on-dark); color: var(--ink); }
.v-btn-light:hover { background: #fff; color: var(--ink); }
.v-btn-ghost-dark { color: var(--on-dark); border-color: color-mix(in srgb, var(--dark) 65%, #fff); background: transparent; }
.v-btn-ghost-dark:hover { border-color: var(--on-dark); color: var(--on-dark); }
.v-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.v-link:hover { color: var(--brand); }

/* ---------- Cabeçalho: botão de WhatsApp ---------- */
.nav-cta.v-btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }

/* ---------- WhatsApp flutuante com rótulo (também no telemóvel) ---------- */
.wa-float { background: var(--wa); transition: opacity .25s ease, transform .25s ease; }
.wa-float span { display: inline !important; }
.wa-float.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (max-width: 640px) { .wa-float { right: 16px; bottom: 16px; padding: 12px 18px 12px 14px; font-size: 15px; } }

/* ---------- Hero da home ---------- */
.v-hero { padding: 28px 0 40px; background: radial-gradient(120% 70% at 100% 0%, var(--brand-soft) 0%, transparent 55%); overflow-x: clip; }
.v-hero-grid { display: grid; gap: 32px; align-items: center; }
.v-hero h1 { font-size: clamp(34px, 6.4vw, 60px); letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.v-hero .v-lead em { font-style: normal; font-weight: 700; color: var(--ink); }
.v-ctas { display: grid; gap: 10px; }
.v-ctas .v-btn { width: 100%; }
.v-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; font-weight: 600; }
.v-ticks li { display: flex; gap: 6px; align-items: center; }
.v-ticks li::before, .v-plan li::before { content: "✓"; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-weight: 800; }
.v-ticks li::before { width: 16px; height: 16px; font-size: 10px; }
@media (min-width: 560px) { .v-ctas { display: flex; flex-wrap: wrap; } .v-ctas .v-btn { width: auto; } }
@media (min-width: 900px) { .v-hero { padding: 64px 0 72px; } .v-hero-grid:not(.is-single) { grid-template-columns: 1.05fr .95fr; gap: 48px; } }
.v-hero-grid.is-single > div { max-width: 820px; }

/* ---------- Hero: telemóvel em 3D (moldura, ecrã e cartões à volta; só CSS) ---------- */
.v-chat-stage { position: relative; height: 560px; perspective: 1400px; display: grid; place-items: center; }
.v-chat-floor { position: absolute; width: 280px; height: 70px; bottom: 16px; left: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(33,29,26,.25), transparent); filter: blur(6px); }
.v-chat-scene { position: relative; width: 240px; height: 488px; transform-style: preserve-3d; transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, -14deg)); transition: transform .4s ease-out; }
.v-cphone { position: absolute; inset: 0; border-radius: 40px; padding: 10px; background: linear-gradient(150deg, #5B6068 0%, #23262B 18%, #0E1013 50%, #2A2D33 82%, #4D525A 100%); box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.38), inset -1.5px -1.5px 0 rgba(0,0,0,.65), inset 0 0 0 4px #0B0C0E, 0 40px 60px -30px rgba(33,29,26,.65); transform-style: preserve-3d; }
/* Lateral em metal: 20 camadas de 1,4 px atrás da frente (cerca de 28 px, a proporção de um iPhone), mais claras no meio como titânio escovado. */
.v-cphone-edge { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.v-cphone-edge i { position: absolute; inset: 0; border-radius: 40px; transform: translateZ(calc(var(--i) * -1.4px)); background: linear-gradient(135deg, #9AA0AA 0%, #5A5F67 22%, #C9CED5 48%, #6A6F77 70%, #3B3E44 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.v-cphone-edge i:nth-child(n+9):nth-child(-n+12) { background: linear-gradient(135deg, #AEB4BD 0%, #6A6F77 22%, #DDE1E6 48%, #7A7F87 70%, #44474D 100%); }
.v-cphone-edge i:last-of-type { box-shadow: 0 30px 50px -20px rgba(0,0,0,.55); }
.v-btn-side { position: absolute; width: 5px; border-radius: 2px; background: linear-gradient(90deg, #4A4F57, #C9CED5 50%, #4A4F57); transform: translateZ(-14px); }
.v-btn-side.is-l1 { left: -3px; top: 100px; height: 56px; }
.v-btn-side.is-l2 { left: -3px; top: 168px; height: 56px; }
.v-btn-side.is-r { right: -3px; top: 126px; height: 74px; }
.v-cphone-screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; display: flex; flex-direction: column; background: #EFE7DD radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px) 0 0 / 14px 14px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #111B21; }
.v-cphone-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%); pointer-events: none; }
.v-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 66px; height: 19px; border-radius: 12px; background: #050607; z-index: 2; }
.v-sbar { display: flex; justify-content: space-between; align-items: center; padding: 9px 22px 0 26px; height: 28px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--wa); }
.v-ic { display: flex; gap: 4px; align-items: center; }
.v-signal { width: 14px; height: 8px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 8px, currentColor 8px 10px, transparent 10px 12px, currentColor 12px 14px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.v-bat { width: 18px; height: 9px; border: 1.3px solid currentColor; border-radius: 3px; padding: 1px; }
.v-bat::before { content: ""; display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1px; }
.v-float { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 16px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 22px 40px -18px rgba(33,29,26,.45); font-size: 13px; font-weight: 600; line-height: 1.3; }
.v-float-b { right: -112px; top: 200px; flex-direction: column; align-items: flex-start; gap: 0; transform: translateZ(50px); }
.v-float-b small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.v-float-b b { font-size: 18px; letter-spacing: -0.02em; color: var(--brand-dark); }
@media (max-width: 899px) { .v-chat-stage { height: 520px; } }
@media (min-width: 1100px) { .v-chat-scene { scale: 1.08; } }
@media (max-width: 559px) {
  .v-chat-stage { height: 470px; }
  .v-chat-scene { scale: .86; }
  .v-float-b { right: -30px; top: 200px; }
}
/* O telemóvel flutua devagar (sem movimento reduzido). */
@media (prefers-reduced-motion: no-preference) {
  .v-chat-stage.is-running .v-chat-scene { animation: v-float-phone 6s ease-in-out infinite; }
}
@keyframes v-float-phone { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- Serviços em mosaico ---------- */
.v-bento { display: grid; gap: 14px; }
.v-bn { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
.v-bn:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.v-bn h3 { font-size: 24px; }
.v-bn p { color: var(--muted); font-size: 15.5px; margin: 0 0 4px; }
.v-chip { font-size: 12.5px; font-weight: 700; background: var(--tint); color: var(--ink); border-radius: 999px; padding: 5px 12px; }
.v-bn.is-main { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.v-bn.is-main h3 { color: var(--on-dark); }
.v-bn.is-main p { color: var(--on-dark-muted); }
.v-bn.is-main .v-chip { background: color-mix(in srgb, var(--dark) 82%, #fff); color: var(--on-dark); }
.v-bn.is-main .v-link { color: var(--on-dark); text-decoration-color: var(--brand-light); }
@media (min-width: 860px) {
  .v-bento { grid-template-columns: 1.25fr 1fr 1fr; }
  .v-bn.is-main { padding: 32px; }
  .v-bn.is-main h3 { font-size: 30px; }
}

/* ---------- Planos (home e página de Planos) ---------- */
.v-plans { display: grid; gap: 14px; align-items: stretch; }
.v-plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.v-plan h2, .v-plan h3 { font-size: 22px; letter-spacing: -0.02em; }
.v-plan.is-featured h2 { color: var(--on-dark); }
.v-plan .v-for { color: var(--muted); font-size: 15px; margin: 2px 0 8px; }
.v-plan .v-price { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 0; }
.v-plan ul { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 9px; font-size: 15px; }
.v-plan li { display: flex; gap: 10px; }
.v-plan li::before { width: 20px; height: 20px; margin-top: 2px; font-size: 11px; }
.v-plan .v-btn { margin-top: auto; width: 100%; }
.v-plan .v-alt { text-align: center; font-size: 14px; margin: 2px 0 -10px; }
.v-plan .v-alt a { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.v-plan.is-featured { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.v-plan.is-featured h3 { color: var(--on-dark); }
.v-plan.is-featured .v-for, .v-plan.is-featured .v-alt { color: var(--on-dark-muted); }
.v-plan.is-featured .v-alt a { color: var(--on-dark); }
.v-plan.is-featured li::before { background: color-mix(in srgb, var(--dark) 75%, #fff); color: var(--brand-light); }
.v-plan.is-featured .v-price { color: var(--brand-light); }
.v-badge { position: absolute; top: -12px; left: 24px; background: var(--brand-dark); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.v-plans-foot { margin-top: 18px; color: var(--muted); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
@media (min-width: 860px) { .v-plans { grid-template-columns: repeat(3, 1fr); } }

.v-phero { padding: 36px 0 28px; background: radial-gradient(120% 70% at 100% 0%, var(--brand-soft) 0%, transparent 55%); }
.v-phero h1 { font-size: clamp(32px, 5.6vw, 54px); letter-spacing: -0.035em; line-height: 1.05; max-width: 14em; }
.v-phero .v-lead { margin-bottom: 0; }
.v-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.v-jump a { font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 9px 14px; min-height: 44px; display: inline-flex; align-items: center; }
.v-jump a:hover { border-color: var(--brand); }

.v-table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.v-cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.v-cmp th, .v-cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.v-cmp tbody th { font-weight: 500; }
.v-cmp thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--tint); }
.v-cmp thead th.is-hl { color: var(--brand-dark); }
.v-cmp td:not(:first-child), .v-cmp th:not(:first-child) { text-align: center; width: 24%; }
.v-cmp tbody tr:last-child td { border-bottom: 0; }
.v-cmp .is-yes { color: var(--brand-dark); font-weight: 800; }
.v-cmp .is-no { color: color-mix(in srgb, var(--muted) 70%, #fff); }
.v-cmp tfoot td { font-weight: 800; font-variant-numeric: tabular-nums; background: var(--tint); border-bottom: 0; }

.v-extra { display: grid; gap: 14px; }
.v-card { border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); background: var(--surface); }
.v-card h3 { font-size: 20px; margin-bottom: 8px; }
.v-card p { color: var(--muted); margin: 0 0 14px; }
.v-card.is-dashed { border-style: dashed; background: transparent; }
@media (min-width: 760px) { .v-extra { grid-template-columns: 1fr 1fr; } }

/* ---------- Como funciona ---------- */
.v-steps { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: v-s; }
.v-step { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; align-content: start; padding-bottom: 26px; position: relative; --dl: 0s; }
.v-step:nth-child(2) { --dl: .25s; } .v-step:nth-child(3) { --dl: .5s; } .v-step:nth-child(4) { --dl: .75s; }
.v-step::before { counter-increment: v-s; content: counter(v-s); grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); border: 2px solid var(--brand); color: var(--on-brand); font-weight: 800; display: grid; place-items: center; position: relative; z-index: 1; transition: background .4s ease var(--dl), color .4s ease var(--dl); }
.v-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--brand), var(--brand)) top left / 100% 100% no-repeat, var(--border); transition: background-size .6s ease calc(var(--dl) + .2s); }
.v-step h3 { font-size: 18px; }
.v-step p { color: var(--muted); font-size: 15.5px; margin: 6px 0 0; }
.v-steps.is-pre .v-step::before { background: var(--surface); color: var(--brand-dark); }
.v-steps.is-pre .v-step:not(:last-child)::after { background-size: 100% 0%, auto; }
@media (min-width: 860px) {
  .v-steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .v-step { grid-template-columns: 1fr; padding: 0; }
  .v-step::before { grid-row: auto; margin-bottom: 4px; }
  .v-step:not(:last-child)::after { left: 52px; right: -24px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .v-steps.is-pre .v-step:not(:last-child)::after { background-size: 0% 100%, auto; }
}
@media (prefers-reduced-motion: reduce) { .v-step::before, .v-step::after { transition: none !important; } }

/* ---------- Leandro ---------- */
.v-person { display: grid; gap: 24px; align-items: center; }
.v-photo-slot { aspect-ratio: 4 / 5; max-width: 340px; width: 100%; border-radius: 28px; background: var(--tint); border: 2px dashed color-mix(in srgb, var(--border) 80%, #000); display: grid; place-content: center; text-align: center; gap: 8px; color: var(--muted); font-size: 14px; padding: 20px; overflow: hidden; }
.v-photo-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.v-photo-slot.has-photo { border: 0; padding: 0; display: block; }
.v-mono { width: 84px; height: 84px; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-weight: 800; font-size: 28px; display: grid; place-items: center; margin: 0 auto 6px; }
.v-person h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 4px; }
.v-sig { margin: 14px 0 18px; font-weight: 700; }
.v-sig span { display: block; color: var(--muted); font-weight: 500; font-size: 14.5px; }
.v-person-body p { color: var(--muted); max-width: 36em; }
@media (min-width: 820px) { .v-person { grid-template-columns: 340px 1fr; gap: 56px; } }

/* ---------- Bloco de contacto com formulário ---------- */
.v-audit { background: var(--brand-soft); border-radius: 28px; padding: 28px 22px; display: grid; gap: 24px; }
.v-audit h2 { font-size: clamp(26px, 4vw, 36px); }
.v-checks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-weight: 600; }
.v-checks li { display: flex; gap: 10px; }
.v-checks li::before { content: "→"; color: var(--brand); font-weight: 800; }
.v-form.contact-form { background: var(--surface); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); margin: 0; }
@media (min-width: 860px) { .v-audit { grid-template-columns: 1fr 1fr; padding: 44px; gap: 44px; align-items: center; } }

/* ---------- FAQ ---------- */
.v-faq { display: grid; gap: 10px; max-width: 820px; }
.v-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.v-faq summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 20px; font-weight: 700; position: relative; min-height: 52px; display: flex; align-items: center; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-weight: 700; transition: transform .2s ease; }
.v-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.v-faq details p { padding: 0 20px 18px; margin: 0; color: var(--muted); }

/* ---------- CTA final ---------- */
.v-final { background: var(--dark); color: var(--on-dark); border-radius: 28px; padding: 36px 24px; display: grid; gap: 20px; }
.v-final h2 { font-size: clamp(28px, 4.4vw, 44px); color: var(--on-dark); }
.v-final p { color: var(--on-dark-muted); margin: 12px 0 0; max-width: 34em; }
.v-final .v-eyebrow { color: var(--brand-light); }
.v-final-acts { display: grid; gap: 10px; }
.v-phone-line { font-size: 14.5px; color: var(--on-dark-muted); }
.v-phone-line a { color: var(--on-dark); font-weight: 700; display: inline-block; padding: 12px 0; }
@media (min-width: 760px) { .v-final { padding: 52px; grid-template-columns: 1.3fr 1fr; align-items: center; } }

/* ---------- Movimento discreto ao fazer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v-reveal { animation: v-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes v-rise { from { transform: translateY(18px); } to { transform: none; } }

/* ---------- Rodapé com 3 colunas (Serviços, Site, Contacto) ---------- */
@media (min-width: 641px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 960px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-col h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 16px; font-weight: 700; line-height: 1.1; }
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Hero escuro (castanho quente com brilho terracota) ---------- */
.v-hero.is-dark { background: radial-gradient(70% 80% at 85% 30%, rgb(var(--brand-rgb) / .45) 0%, transparent 62%), radial-gradient(60% 70% at 0% 100%, rgb(var(--brand-rgb) / .14) 0%, transparent 60%), var(--hero-bg); color: var(--on-dark); }
.v-hero.is-dark h1 { color: var(--on-dark); }
.v-hero.is-dark .v-eyebrow { color: var(--brand-light); }
.v-hero.is-dark .v-lead { color: var(--on-dark-muted); }
.v-hero.is-dark .v-lead em { color: var(--on-dark); }
.v-hero.is-dark .v-btn-line { color: var(--on-dark); border-color: color-mix(in srgb, var(--hero-bg) 60%, #fff); }
.v-hero.is-dark .v-btn-line:hover { background: var(--on-dark); color: var(--ink); }
.v-hero.is-dark .v-ticks { color: var(--on-dark); }
.v-hero.is-dark .v-chat-floor { background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.v-hero.is-dark .v-float { color: var(--ink); }

/* ---------- Ecrã de bloqueio com as notificações do site a trabalhar ---------- */
.v-lock-screen { background: radial-gradient(90% 55% at 50% 0%, #fff 0%, transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--tint) 70%, #fff), color-mix(in srgb, var(--tint) 85%, #000)); color: var(--ink); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.v-lock-screen .v-sbar { background: transparent; color: var(--ink); }
.v-lock-clock { display: grid; justify-items: center; gap: 2px; padding: 14px 0 12px; }
.v-lock-clock b { font-family: var(--font); font-size: 54px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.v-lock-pad { width: 10px; height: 9px; border-radius: 2px; background: var(--ink); opacity: .7; position: relative; margin-top: 4px; }
.v-lock-pad::before { content: ""; position: absolute; left: 1.5px; top: -6px; width: 7px; height: 7px; border: 1.6px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.v-notes { list-style: none; margin: 0; padding: 0 10px; display: flex; flex-direction: column; gap: 7px; }
.v-note { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 9px 10px; border-radius: 16px; background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 18px -12px rgba(0,0,0,.35); overflow: hidden; }
.v-note b { display: block; font-size: 11.5px; line-height: 1.2; }
.v-note small { display: block; font-size: 10px; color: #555; line-height: 1.25; }
.v-note time { align-self: start; font-size: 9px; color: #777; }
.v-note-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.v-note-ic svg { width: 16px; height: 16px; }
.v-note-ic.is-wa { background: #25D366; }
.v-note-ic.is-mail { background: var(--brand); }
.v-note-ic.is-cal { background: #2F6FDB; }
.v-note-ic.is-shield { background: var(--dark); }
.v-lock-bar { margin: auto auto 9px; width: 96px; height: 4px; border-radius: 3px; background: var(--ink); opacity: .55; }
.v-lock-stage .v-float-b { top: auto; bottom: 74px; right: -96px; transform: translateZ(60px) rotate(3deg); }
.v-float-chart { left: -150px; top: 300px; width: 190px; flex-direction: column; align-items: stretch; gap: 8px; transform: translateZ(70px); }
.v-float-chart small { font-size: 12px; font-weight: 700; color: var(--ink); }
.v-bars-chart { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.v-bars-chart i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(var(--brand), var(--brand-2)); }
.v-bars-chart i:last-child { background: var(--wa); }
@media (max-width: 559px) { .v-float-chart { left: -40px; top: 372px; width: 170px; } .v-lock-stage .v-float-b { right: -22px; top: -16px; bottom: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .v-lock-stage.is-running .v-note { animation: v-note 12s ease infinite; }
  .v-lock-stage.is-running .v-n4 { animation-name: v-note-4; }
  .v-lock-stage.is-running .v-n3 { animation-name: v-note-3; }
  .v-lock-stage.is-running .v-n2 { animation-name: v-note-2; }
  .v-lock-stage.is-running .v-n1 { animation-name: v-note-1; }
  .v-lock-stage.is-running .v-bars-chart i { animation: v-bar 12s ease infinite; transform-origin: bottom; }
}
/* Cada notificação chega à vez (a mais recente fica em cima e empurra as outras), como num ecrã de bloqueio a sério. */
@keyframes v-note-4 { 0%, 6% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -7px; transform: translateY(-8px) scale(.96); } 10%, 94% { opacity: 1; max-height: 80px; padding-block: 9px; margin-top: 0; transform: none; } 100% { opacity: 0; } }
@keyframes v-note-3 { 0%, 24% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -7px; transform: translateY(-8px) scale(.96); } 28%, 94% { opacity: 1; max-height: 80px; padding-block: 9px; margin-top: 0; transform: none; } 100% { opacity: 0; } }
@keyframes v-note-2 { 0%, 42% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -7px; transform: translateY(-8px) scale(.96); } 46%, 94% { opacity: 1; max-height: 80px; padding-block: 9px; margin-top: 0; transform: none; } 100% { opacity: 0; } }
@keyframes v-note-1 { 0%, 60% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -7px; transform: translateY(-8px) scale(.96); } 64%, 94% { opacity: 1; max-height: 80px; padding-block: 9px; margin-top: 0; transform: none; } 100% { opacity: 0; } }
@keyframes v-bar { 0%, 4% { transform: scaleY(.15); } 70%, 94% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }


/* Cabeçalho translúcido e logótipo do rodapé na cor clara da marca */
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.site-footer .wordmark span { color: var(--brand-light); }


/* ---------- Hero: título com a parte final em destaque ---------- */
.v-accent { color: var(--brand-light); }
.v-hero-copy h1 { font-size: clamp(36px, 5.4vw, 64px); }

/* ---------- Ilustrações dos serviços (substituem os blocos isométricos) ---------- */
.v-ill { width: 100%; height: 150px; margin: 0 0 6px; display: grid; place-items: center; }
.v-bn.is-main .v-ill { height: 190px; }
/* Criação: browser com um site montado e um telemóvel com o mesmo site */
.v-ill-site { position: relative; width: 250px; height: 150px; }
.v-bn.is-main .v-ill-site { width: 300px; height: 180px; }
.v-ill-browser { position: absolute; left: 0; top: 0; width: 82%; height: 88%; background: var(--surface); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 30px -16px rgba(0,0,0,.45); overflow: hidden; }
.v-ill-bar { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px; background: var(--tint); }
.v-ill-bar i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--border) 70%, #000); }
.v-ill-bar span { margin-left: 8px; height: 7px; flex: 1; max-width: 90px; border-radius: 4px; background: var(--surface); }
.v-ill-page { position: relative; padding: 12px 12px 0; display: grid; grid-template-columns: 1fr 42%; gap: 6px 10px; align-content: start; }
.v-ill-h { grid-column: 1; height: 10px; width: 90%; border-radius: 4px; background: var(--ink); }
.v-ill-l { grid-column: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 45%, #fff); }
.v-ill-l.is-short { width: 70%; }
.v-ill-btn { grid-column: 1; width: 48px; height: 13px; border-radius: 999px; background: var(--brand); margin-top: 3px; }
.v-ill-img { grid-column: 2; grid-row: 1 / span 4; border-radius: 8px; min-height: 58px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand) 55%, #fff)); }
.v-ill-mobile { position: absolute; right: 0; bottom: 0; width: 26%; height: 82%; border-radius: 12px; border: 4px solid #1B1D21; background: var(--surface); padding: 12px 6px 6px; display: grid; gap: 5px; align-content: start; box-shadow: 0 18px 30px -14px rgba(0,0,0,.55); }
.v-ill-mobile .v-ill-h { width: 100%; height: 7px; }
.v-ill-mobile .v-ill-btn { width: 70%; height: 9px; margin: 2px 0; }
.v-ill-mobile .v-ill-img { min-height: 28px; grid-row: auto; grid-column: 1; }
/* Otimização: medidor de velocidade e indicadores */
.v-ill-speed { display: flex; align-items: center; gap: 16px; }
.v-gauge { --p: 99; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(#1F9D55 calc(var(--p) * 1%), var(--tint) 0); box-shadow: 0 14px 26px -16px rgba(0,0,0,.35); }
.v-gauge b { font-size: 30px; font-weight: 800; color: #157A41; letter-spacing: -.03em; }
.v-ill-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.v-ill-checks li { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px 4px 5px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.4); }
.v-ill-checks li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: #DDF3E6; color: #157A41; }
/* Gestão: notificações com visto, como as do telemóvel do hero */
.v-ill-care { display: grid; gap: 8px; width: 220px; }
.v-ill-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px 8px 8px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.4); font-size: 13px; transform: translateX(calc((var(--n) - 2) * 10px)); }
.v-ill-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--dark); color: var(--on-dark); }
.v-ill-ic svg { width: 15px; height: 15px; }
.v-ill-note em { font-style: normal; font-weight: 800; color: #157A41; }
/* Movimento ao passar o rato (respeita movimento reduzido) */
@media (prefers-reduced-motion: no-preference) {
  .v-ill-browser, .v-ill-mobile, .v-gauge, .v-ill-note, .v-ill-checks li { transition: transform .45s cubic-bezier(.2,.9,.25,1.15); }
  .v-bn:hover .v-ill-browser { transform: translateY(-4px); }
  .v-bn:hover .v-ill-mobile { transform: translate(6px, -8px) rotate(3deg); }
  .v-bn:hover .v-gauge { transform: scale(1.05) rotate(-4deg); }
  .v-bn:hover .v-ill-checks li:nth-child(2) { transform: translateX(6px); }
  .v-bn:hover .v-ill-checks li:nth-child(3) { transform: translateX(12px); }
  .v-bn:hover .v-ill-note { transform: translateX(0); }
}

/* ---------- Ilustrações dos 4 passos (substituem os blocos isométricos) ---------- */
.v-sill { height: 128px; width: 200px; max-width: 100%; margin: 4px 0 10px; display: grid; place-items: center start; }
.v-sill > * { transition: transform .6s cubic-bezier(.2,.9,.25,1.15) var(--dl), box-shadow .3s ease; }
.v-steps.is-pre .v-sill > * { transform: translateY(14px) scale(.94); }
.v-step:hover .v-sill > * { transform: translateY(-4px); }
/* 1. Conversa */
.v-sill-chat { width: 180px; display: grid; gap: 6px; }
.v-sb { display: grid; gap: 5px; padding: 9px 11px; border-radius: 14px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.4); }
.v-sb i { display: block; height: 5px; border-radius: 3px; background: currentColor; opacity: .45; width: 110px; }
.v-sb i.is-short { width: 70px; }
.v-sb.is-in { justify-self: start; background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-top-left-radius: 4px; }
.v-sb.is-out { justify-self: end; background: var(--brand); color: #fff; border-top-right-radius: 4px; }
.v-sb.is-out i { opacity: .8; }
.v-sb.is-typing { display: flex; gap: 4px; padding: 8px 11px; }
.v-sb.is-typing b { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .v-sb.is-typing b { animation: v-typing 1.2s ease-in-out infinite; }
  .v-sb.is-typing b:nth-child(2) { animation-delay: .15s; } .v-sb.is-typing b:nth-child(3) { animation-delay: .3s; }
}
@keyframes v-typing { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: .9; } }
/* 2. Proposta */
.v-sill-doc { position: relative; width: 150px; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 6px; box-shadow: 0 14px 26px -16px rgba(0,0,0,.45); transform: rotate(-3deg); }
.v-steps.is-pre .v-sill-doc { transform: translateY(14px) scale(.94) rotate(-3deg); }
.v-step:hover .v-sill-doc { transform: translateY(-4px) rotate(-1deg); }
.v-sill-doc::after { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; background: linear-gradient(225deg, var(--bg) 50%, var(--tint) 50%); border-radius: 0 12px 0 6px; }
.v-doc-h { height: 8px; width: 70%; border-radius: 4px; background: var(--ink); margin-bottom: 2px; }
.v-sill-doc i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 40%, #fff); }
.v-sill-doc i.is-short { width: 60%; }
.v-doc-total { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 12px; font-weight: 800; color: var(--brand-dark); display: flex; align-items: center; gap: 6px; }
.v-doc-total::before { content: "✓"; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: #DDF3E6; color: #157A41; }
/* 3. Construção */
.v-sill-build { width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 26px -16px rgba(0,0,0,.45); }
.v-build-page { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.v-bp { height: 22px; border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--border) 70%, #000); }
.v-bp.is-on { border: 0; background: var(--ink); }
.v-bp.is-on.is-img { background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand) 55%, #fff)); }
.v-progress { display: block; margin: 0 10px 10px; height: 6px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.v-progress i { display: block; height: 100%; width: 62%; border-radius: inherit; background: var(--brand); }
@media (prefers-reduced-motion: no-preference) { .v-progress i { animation: v-progress 3.5s ease-in-out infinite; } }
@keyframes v-progress { 0% { width: 20%; } 70%, 100% { width: 92%; } }
/* 4. No ar */
.v-sill-live { position: relative; width: 190px; height: 112px; }
.v-live-site { position: absolute; left: 0; top: 0; width: 150px; height: 92px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 26px -16px rgba(0,0,0,.45); }
.v-live-dot { position: absolute; left: 12px; bottom: 12px; width: 10px; height: 10px; border-radius: 50%; background: #2DA44E; box-shadow: 0 0 0 4px rgba(45,164,78,.18); }
.v-live-note { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 7px 12px 7px 7px; font-size: 12.5px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.45); }
.v-live-note .v-note-ic { width: 24px; height: 24px; border-radius: 7px; }
.v-live-note .v-note-ic svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .v-live-dot { animation: v-ping 2.2s ease-out infinite; } }
@keyframes v-ping { 0% { box-shadow: 0 0 0 0 rgba(45,164,78,.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(45,164,78,0); } }
@media (prefers-reduced-motion: reduce) { .v-sill > *, .v-sill-doc { transition: none !important; } }

/* Foto do Leandro no cartão da página Sobre (design antigo) */
.v-profile-photo { display: block; object-fit: cover; padding: 0; background: var(--tint); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border); }

/* Bloco do formulário numa coluna centrada: título e texto em cima, indicadores em etiquetas, formulário por baixo */
.v-audit-text { margin: 12px 0 0; color: var(--muted); }
.v-audit.is-centered { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 40px 22px; gap: 28px; }
.v-audit.is-centered .v-audit-text { max-width: 44ch; margin-inline: auto; }
.v-audit.is-centered .v-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.v-audit.is-centered .v-checks li { background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; font-weight: 700; gap: 6px; box-shadow: 0 6px 14px -12px rgba(0,0,0,.4); }
.v-audit.is-centered .v-checks li::before { content: "✓"; color: #157A41; }
.v-audit.is-centered .v-form { width: 100%; max-width: 680px; text-align: left; }
@media (min-width: 860px) { .v-audit.is-centered { grid-template-columns: 1fr; padding: 56px 44px; } }

/* Instagram: rodapé e bloco do Leandro */
.footer-col a.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.v-person-links { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.v-link.v-ig { gap: 8px; text-decoration-color: transparent; }
.v-link.v-ig:hover { text-decoration-color: var(--brand); }

/* ---------- Contacto (design novo) ---------- */
.v-contact-ticks { margin-top: 16px; }
.v-contact-grid { display: grid; gap: 18px; align-items: start; }
@media (min-width: 900px) { .v-contact-grid { grid-template-columns: 1.35fr 1fr; gap: 24px; } }
.v-contact-grid .v-card { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(33,29,26,.4); min-width: 0; }
.v-contact-form-card h2 { font-size: 22px; margin: 0 0 4px; }
.v-contact-sub { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.v-form-plain.contact-form { margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.v-form-plain .v-btn { width: 100%; margin-top: 8px; }
.v-contact-side { display: grid; gap: 18px; }
.v-who { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.v-who img, .v-who-mono { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.v-who-mono { display: grid; place-items: center; background: var(--dark); color: var(--on-dark); font-weight: 800; }
.v-who b { display: block; font-size: 17px; }
.v-who small { color: var(--muted); font-size: 13.5px; }
.v-side-title, .v-card .v-side-title { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); margin: 0 0 10px; }
.v-mini-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: v-ms; }
.v-mini-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; }
.v-mini-steps li::before { counter-increment: v-ms; content: counter(v-ms); width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--brand); color: var(--brand-dark); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.v-lines { display: grid; gap: 8px; }
.v-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid var(--border); padding-top: 2px; font-size: 14.5px; min-height: 44px; }
.v-line:first-child { border-top: 0; padding-top: 0; }
.v-line span { color: var(--muted); }
.v-line a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-align: right; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 4px; }

/* ---------- Páginas de serviço (design novo, template servico) ---------- */
.v-shero { padding: 36px 0 44px; background: radial-gradient(120% 70% at 100% 0%, var(--brand-soft) 0%, transparent 55%); overflow-x: clip; }
.v-shero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .v-shero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } }
.v-shero h1 { font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -0.035em; line-height: 1.05; }
.v-shero h1 em { font-style: normal; color: var(--brand); }
.v-sh-ill { position: relative; width: 100%; max-width: 460px; height: 320px; margin: 0 auto; }
.v-sh-browser { position: absolute; left: 0; top: 30px; width: 80%; height: 230px; background: var(--surface); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 24px 40px -20px rgba(0,0,0,.45); overflow: hidden; }
.v-sh-browser .v-ill-bar { height: 24px; }
.v-sh-page { padding: 16px; display: grid; grid-template-columns: 1fr 42%; gap: 8px 12px; }
.v-sh-h { grid-column: 1; height: 14px; width: 90%; border-radius: 4px; background: var(--ink); }
.v-sh-l { grid-column: 1; height: 7px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 40%, #fff); }
.v-sh-l.is-short { width: 70%; }
.v-sh-btn { grid-column: 1; width: 70px; height: 18px; border-radius: 999px; background: var(--brand); margin-top: 4px; }
.v-sh-img { grid-column: 2; grid-row: 1 / span 4; border-radius: 10px; min-height: 92px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand) 55%, #fff)); }
.v-sh-mobile { position: absolute; right: 0; bottom: 0; width: 26%; height: 240px; border-radius: 18px; border: 5px solid #1B1D21; background: var(--surface); padding: 16px 8px 8px; display: grid; gap: 7px; align-content: start; box-shadow: 0 24px 40px -18px rgba(0,0,0,.55); }
.v-sh-mobile .v-sh-h { width: 100%; height: 10px; }
.v-sh-mobile .v-sh-btn { width: 70%; height: 12px; }
.v-sh-mobile .v-sh-img { grid-row: auto; grid-column: 1; min-height: 46px; }
.v-sh-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 6px; font-size: 13px; font-weight: 700; box-shadow: 0 10px 22px -14px rgba(0,0,0,.45); white-space: nowrap; }
.v-sh-chip::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #DDF3E6; color: #157A41; }
.v-sh-chip.is-1 { left: -6px; top: 0; } .v-sh-chip.is-3 { right: 30px; top: 6px; } .v-sh-chip.is-2 { left: 10px; bottom: 40px; } .v-sh-chip.is-4 { left: 34%; bottom: 0; }
@media (max-width: 520px) { .v-sh-ill { height: 300px; } .v-sh-chip.is-3 { right: 0; } .v-sh-chip { font-size: 12px; } }
.v-sh-anno { text-align: center; color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }

.v-duo { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 860px) { .v-duo { grid-template-columns: .9fr 1.1fr; } }
.v-sol { position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark); border-radius: 22px; padding: 28px; display: grid; align-content: start; gap: 12px; min-height: 280px; }
.v-sol .v-sol-k { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-light); }
.v-sol-t { margin: 0; font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; position: relative; }
.v-sol-s { margin: 0; color: var(--on-dark-muted); max-width: 42ch; position: relative; }
.v-sol-ill { position: absolute; right: -20px; bottom: -20px; width: 180px; height: 120px; border-radius: 14px; border: 2px solid rgba(242,169,140,.35); transform: rotate(-8deg); }
.v-sol-ill span { position: absolute; left: 14px; height: 8px; border-radius: 4px; background: rgba(242,169,140,.35); }
.v-sol-ill span:nth-child(1) { top: 16px; width: 60%; } .v-sol-ill span:nth-child(2) { top: 34px; width: 40%; } .v-sol-ill span:nth-child(3) { top: 58px; width: 50px; height: 18px; border-radius: 999px; background: rgba(193,80,46,.55); }
.v-inc { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 24px; }
.v-inc h2 { font-size: 22px; margin-bottom: 14px; }
.v-tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .v-tiles { grid-template-columns: 1fr 1fr; } .v-tiles .is-wide { grid-column: 1 / -1; } }
.v-tiles li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.35; transition: transform .2s ease, box-shadow .2s ease; }
.v-tiles li:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(0,0,0,.4); }
.v-tiles small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.v-tiles em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 800; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 2px 9px; }
.v-ti { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); }
.v-ti svg { width: 20px; height: 20px; }
@media (min-width: 760px) { .v-plans.v-plans-2 { grid-template-columns: 1fr 1fr; } }
.v-final-wa { color: var(--on-dark); text-align: center; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--brand-light); text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .v-tiles li { transition: none; } }

/* Serviço Otimização: resultados de pesquisa com o site a subir para o 1.º lugar e indicador de velocidade */
.v-sh-ill.is-optimize .v-sh-chip.is-2 { left: auto; right: 30px; top: 6px; bottom: auto; }
.v-sh-ill.is-optimize .v-sh-chip.is-3 { right: auto; left: 10px; top: auto; bottom: 40px; }
@media (max-width: 520px) { .v-sh-ill.is-optimize .v-sh-chip.is-2 { right: 0; } }
.v-serp { padding: 14px 16px; display: grid; gap: 9px; }
.v-serp-q { display: flex; align-items: center; gap: 8px; height: 26px; border: 1px solid var(--border); border-radius: 999px; padding: 0 10px; color: var(--muted); }
.v-serp-q svg { width: 13px; height: 13px; flex: none; }
.v-serp-q span { height: 6px; width: 46%; border-radius: 3px; background: color-mix(in srgb, var(--muted) 30%, #fff); }
.v-serp-r { position: relative; display: grid; gap: 5px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.v-serp-r i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, #fff); }
.v-serp-r i:first-child { height: 8px; width: 62%; background: color-mix(in srgb, var(--muted) 50%, #fff); }
.v-serp-r i:last-child { width: 84%; }
.v-serp-r.is-top { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: 0 12px 22px -16px rgba(0,0,0,.45); }
.v-serp-r.is-top i:first-child { background: var(--brand); }
.v-serp-r.is-top i { background: color-mix(in srgb, var(--brand) 30%, #fff); }
.v-serp-up { position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; background: #157A41; color: #fff; display: grid; place-items: center; }
.v-serp-up svg { width: 13px; height: 13px; }
.v-sh-gauge { position: absolute; right: 0; bottom: 18px; width: 34%; background: var(--surface); border-radius: 16px; padding: 12px 12px 10px; box-shadow: 0 24px 40px -18px rgba(0,0,0,.5); display: grid; justify-items: center; gap: 6px; }
.v-sh-gauge svg { width: 100%; height: auto; }
.v-g-track { stroke: var(--tint); }
.v-g-val { stroke: #157A41; stroke-dasharray: 126; stroke-dashoffset: 8; }
.v-sh-gauge b { display: block; height: 6px; width: 60%; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, #fff); }
@media (prefers-reduced-motion: no-preference) {
  .v-serp-r.is-top { animation: v-serp-rise 4s cubic-bezier(.2,.9,.25,1.1) infinite; }
  .v-g-val { animation: v-g-fill 4s ease-out infinite; }
}
@keyframes v-serp-rise { 0%, 12% { transform: translateY(58px); } 32%, 100% { transform: translateY(0); } }
@keyframes v-g-fill { 0%, 10% { stroke-dashoffset: 90; } 40%, 100% { stroke-dashoffset: 8; } }

/* "A solução" com os problemas que se corrigem em etiquetas */
.v-sol-fix { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.v-sol-fix li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--on-dark); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 12px 6px 7px; }
.v-sol-fix li::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: #157A41; color: #fff; }

/* Bloco de orçamento (serviço sem pacote) */
.v-quote { display: grid; gap: 22px; align-items: center; background: var(--brand-soft); border-radius: 28px; padding: 30px 22px; }
@media (min-width: 860px) { .v-quote { grid-template-columns: auto 1fr auto; gap: 36px; padding: 40px 44px; } }
.v-quote h2 { font-size: clamp(26px, 3.4vw, 36px); }
.v-quote p { margin: 10px 0 0; color: var(--muted); max-width: 40em; }
.v-quote-ill { position: relative; width: 150px; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 6px; box-shadow: 0 14px 26px -16px rgba(0,0,0,.45); transform: rotate(-3deg); }
.v-quote-ill i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 40%, #fff); }
.v-quote-ill i.is-short { width: 60%; }
.v-quote-clk { position: absolute; right: -14px; bottom: -14px; width: 44px; height: 44px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.v-quote-clk svg { width: 22px; height: 22px; }
@media (min-width: 860px) { .v-quote .v-btn { white-space: nowrap; } }

/* Serviço Gestão: site no ar (ponto verde), escudo e mês de manutenção com vistos */
.v-sh-ill.is-manage .v-sh-browser { position: absolute; }
.v-sh-ok { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px 5px 7px; }
.v-sh-ok i { width: 10px; height: 10px; border-radius: 50%; background: #2DA44E; box-shadow: 0 0 0 4px rgba(45,164,78,.18); }
.v-sh-ok b { height: 6px; width: 46px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, #fff); }
.v-sh-shield { position: absolute; left: 62%; top: 0; width: 64px; height: 64px; border-radius: 18px; background: var(--dark); color: var(--brand-light); display: grid; place-items: center; box-shadow: 0 18px 30px -14px rgba(0,0,0,.6); }
.v-sh-shield svg { width: 32px; height: 32px; }
.v-sh-month { position: absolute; right: 0; bottom: 6px; width: 40%; background: var(--surface); border-radius: 16px; padding: 12px; box-shadow: 0 24px 40px -18px rgba(0,0,0,.5); display: grid; gap: 8px; }
.v-sh-mh { display: flex; align-items: center; justify-content: space-between; }
.v-sh-mh b { height: 8px; width: 50%; border-radius: 4px; background: var(--ink); }
.v-sh-mh svg { width: 18px; height: 18px; color: var(--brand); }
.v-sh-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.v-sh-days i { aspect-ratio: 1; border-radius: 4px; background: var(--tint); position: relative; }
.v-sh-days i.is-on { background: #DDF3E6; }
.v-sh-days i.is-on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #157A41; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .v-sh-ok i { animation: v-ping 2.2s ease-out infinite; }
  .v-sh-mh svg { animation: v-spin 6s linear infinite; }
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* "O problema": cartão claro com os riscos em etiquetas; ao lado do cartão escuro da solução */
@media (min-width: 860px) { .v-duo.is-even { grid-template-columns: 1fr 1fr; } }
.v-prob { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 28px; display: grid; align-content: start; gap: 12px; }
.v-prob .v-sol-k { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-dark); }
.v-prob .v-sol-t { color: var(--ink); }
.v-prob-x { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-prob-x li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 7px; }
.v-prob-x li::before { content: "!"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #FBE3DC; color: #A8431F; }
.v-inc.is-full { margin-top: 18px; }
@media (min-width: 860px) {
  .v-inc.is-full .v-tiles { grid-template-columns: repeat(5, 1fr); }
  .v-inc.is-full .v-tiles .is-wide { grid-column: auto; }
  .v-inc.is-full .v-tiles li { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 16px; }
}

/* Um só pacote: cartão largo, escuro à esquerda e lista em 2 colunas à direita */
.v-wide-plan { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
@media (min-width: 860px) { .v-wide-plan { grid-template-columns: 340px 1fr; } }
.v-wp-main { background: var(--dark); color: var(--on-dark); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.v-wp-main h3 { font-size: 24px; color: var(--on-dark); }
.v-wp-main .v-for { color: var(--on-dark-muted); margin: 0 0 6px; font-size: 15px; }
.v-wp-main .v-price { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand-light); margin: 0 0 16px; }
.v-wp-main .v-btn { width: 100%; margin-top: auto; }
.v-wp-main .v-alt { text-align: center; margin: 4px 0 -8px; font-size: 14px; }
.v-wp-main .v-alt a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; color: var(--on-dark); }
.v-wp-list { list-style: none; margin: 0; padding: 28px; display: grid; align-content: center; gap: 14px 28px; font-size: 15px; }
@media (min-width: 640px) { .v-wp-list { grid-template-columns: 1fr 1fr; } }
.v-wp-list li { display: flex; gap: 10px; }
.v-wp-list li::before { content: "✓"; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--brand-soft); color: var(--brand-dark); }
.v-sh-ill.is-manage { height: 290px; }

/* ---------- Sobre (design novo) ---------- */
.v-shero .v-lead em { font-style: normal; font-weight: 700; color: var(--ink); }
.v-ab-wrap { padding: 10px 14px 26px; }
.v-ab-photo { position: relative; max-width: 360px; margin: 0 auto; }
.v-ab-photo img, .v-ab-mono { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 50px -28px rgba(0,0,0,.55); }
.v-ab-mono { display: grid; place-items: center; background: var(--dark); color: var(--on-dark); font-size: 64px; font-weight: 800; }
.v-ab-card { position: absolute; left: -14px; bottom: -18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 34px -18px rgba(0,0,0,.45); display: grid; gap: 4px; max-width: 80%; }
.v-ab-card b { font-size: 17px; }
.v-ab-card small { color: var(--muted); font-size: 13.5px; }
.v-ab-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.v-ab-pills span { font-size: 12px; font-weight: 700; background: var(--tint); border-radius: 999px; padding: 3px 10px; }
.v-ab-ig { position: absolute; right: -10px; top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 0 14px 0 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: 0 14px 26px -14px rgba(0,0,0,.6); }
.v-ab-ig:hover { color: var(--brand-light); }
@media (max-width: 520px) { .v-ab-card { left: 8px; } .v-ab-ig { right: 8px; } }

.v-story { display: grid; gap: 28px; }
@media (min-width: 860px) { .v-story { grid-template-columns: .85fr 1.15fr; gap: 56px; } .v-story-side { position: sticky; top: 96px; align-self: start; } }
.v-story h2 { font-size: clamp(28px, 4vw, 40px); }
.v-story-quote { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--brand); font-size: clamp(19px, 2vw, 22px); font-weight: 600; line-height: 1.4; color: var(--brand-dark); max-width: 26ch; }
.v-story-lead { font-size: clamp(19px, 2vw, 22px); font-weight: 600; line-height: 1.45; margin: 0 0 22px; }
.v-story-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.v-story-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.v-story-list p { margin: 0; color: var(--muted); font-size: 15.5px; }

.v-vals { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .v-vals { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .v-vals { grid-template-columns: repeat(4, 1fr); } }
.v-vals li { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 14px 14px 22px; display: grid; align-content: start; gap: 8px; transition: transform .25s ease, box-shadow .25s ease, opacity .6s ease calc(var(--k) * .12s), translate .6s cubic-bezier(.2,.9,.25,1.1) calc(var(--k) * .12s); }
.v-vals li:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -20px rgba(0,0,0,.5); }
.v-vals h3, .v-vals p, .v-vals .v-no { margin-inline: 8px; }
.v-vals h3 { font-size: 18px; }
.v-vals p { margin-top: 0; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.v-no { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--brand-dark); margin-top: 6px; }
.v-vals.is-pre li { opacity: 0; translate: 0 24px; }
.v-vi { position: relative; height: 112px; border-radius: 16px; background: var(--tint); overflow: hidden; display: grid; place-items: center; }
.v-vi > div { position: absolute; inset: 0; display: grid; place-items: center; }
/* 1. Transparência: orçamento lido linha a linha */
.v-vi-doc::before { content: ""; position: absolute; left: 50%; top: 14px; width: 110px; height: 96px; translate: -50% 0; background: var(--surface); border-radius: 10px; box-shadow: 0 12px 22px -14px rgba(0,0,0,.45); }
.v-vi-doc > * { position: absolute; left: calc(50% - 43px); border-radius: 3px; }
.v-vi-doc .d-h { top: 26px; width: 56px; height: 7px; background: var(--ink); }
.v-vi-doc i { width: 86px; height: 5px; background: color-mix(in srgb, var(--muted) 25%, #fff); }
.v-vi-doc i:nth-of-type(1) { top: 42px; } .v-vi-doc i:nth-of-type(2) { top: 54px; } .v-vi-doc i.is-short { top: 66px; width: 54px; }
.v-vi-doc .d-tot { top: 84px; width: 86px; height: 12px; border-radius: 6px; background: var(--brand-soft); border: 1px dashed var(--brand); }
.v-vi-doc .d-scan { top: 22px; width: 96px; left: calc(50% - 48px); height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); }
/* 2. Simplicidade: linha emaranhada que se endireita */
.v-vi-simple svg { width: 78%; height: auto; fill: none; stroke-linecap: round; stroke-width: 4; }
.v-vi-simple .tangle { stroke: color-mix(in srgb, var(--muted) 35%, #fff); }
.v-vi-simple .line { stroke: var(--brand); stroke-dasharray: 104; stroke-dashoffset: 0; }
.v-vi-simple .ok { position: absolute; right: 12%; top: calc(50% - 26px); width: 22px; height: 22px; border-radius: 50%; background: #157A41; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
/* 3. Proximidade: o Leandro e o cliente aproximam-se */
.v-vi-near .av { position: absolute; top: calc(50% - 24px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 10px 18px -10px rgba(0,0,0,.5); }
.v-vi-near .a1 { left: 18%; background: var(--dark); color: var(--on-dark); }
.v-vi-near .a2 { right: 18%; background: var(--surface); color: var(--brand-dark); }
.v-vi-near .a2 svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.v-vi-near .link { position: absolute; left: 30%; right: 30%; top: 50%; height: 3px; translate: 0 -50%; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 14px); }
/* 4. Acompanhamento: ciclo que não pára */
.v-vi-loop .ring { position: absolute; width: 76px; height: 76px; left: calc(50% - 38px); top: calc(50% - 38px); border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--brand) 45%, #fff); }
.v-vi-loop .orb { position: absolute; left: calc(50% + 31px); top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 20%, transparent); }
.v-vi-loop .core { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 8px 16px -10px rgba(0,0,0,.5); }
.v-vi-loop .core i { width: 10px; height: 10px; border-radius: 50%; background: #2DA44E; }
@media (prefers-reduced-motion: no-preference) {
  .v-vi-doc .d-scan { animation: v-scan 3.2s ease-in-out infinite; }
  .v-vi-simple .tangle { animation: v-fade 4s ease-in-out infinite; }
  .v-vi-simple .line { stroke-dashoffset: 104; animation: v-draw 4s ease-in-out infinite; }
  .v-vi-simple .ok { opacity: 0; animation: v-pop 4s ease-in-out infinite; }
  .v-vi-near .a1 { animation: v-near-l 3.6s ease-in-out infinite; }
  .v-vi-near .a2 { animation: v-near-r 3.6s ease-in-out infinite; }
  .v-vi-near .link { animation: v-dash 1s linear infinite; }
  .v-vi-loop .ring { animation: v-spin 12s linear infinite; }
  .v-vi-loop .orb { left: calc(50% - 7px); animation: v-orbit 3s linear infinite; }
  .v-vi-loop .core i { animation: v-ping 2.2s ease-out infinite; }
}
@keyframes v-scan { 0% { top: 22px; } 25% { top: 40px; } 45% { top: 52px; } 65% { top: 64px; } 85%, 100% { top: 83px; } }
@keyframes v-fade { 0%, 15% { opacity: 1; } 45%, 85% { opacity: 0; } 100% { opacity: 1; } }
@keyframes v-draw { 0%, 20% { stroke-dashoffset: 104; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 104; } }
@keyframes v-pop { 0%, 45% { opacity: 0; scale: .4; } 55%, 85% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .4; } }
@keyframes v-near-l { 0%, 100% { translate: 0 0; } 50% { translate: 18px 0; } }
@keyframes v-near-r { 0%, 100% { translate: 0 0; } 50% { translate: -18px 0; } }
@keyframes v-dash { to { background-position: 14px 0; } }
@keyframes v-orbit { from { transform: rotate(0deg) translateX(38px); } to { transform: rotate(360deg) translateX(38px); } }
@media (prefers-reduced-motion: reduce) { .v-vals.is-pre li { opacity: 1; translate: none; } .v-vi-simple .tangle { opacity: 0; } }
@media (max-width: 520px) { .v-ab-photo { max-width: 260px; } }

/* Nota de privacidade por baixo do botão dos formulários: espaço para respirar */
.contact-form .form-privacy-note { margin: 16px 0 0; line-height: 1.55; }

/* ---------- Serviços (design novo) ---------- */
.v-pick { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 18px; box-shadow: 0 24px 40px -28px rgba(0,0,0,.45); }
.v-pick-k { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.v-pick a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; text-decoration: none; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; min-height: 64px; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.v-pick a:hover { border-color: var(--brand); transform: translateX(4px); background: var(--brand-soft); }
.v-pick small { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.v-pick b { grid-column: 1; font-size: 16px; }
.v-pick-go { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; font-weight: 800; transition: background .2s ease; }
.v-pick a:hover .v-pick-go { background: var(--brand); }
.v-intro-line { max-width: 62ch; font-size: clamp(18px, 2vw, 21px); font-weight: 600; line-height: 1.45; margin: 0 0 28px; }
.v-svc { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .v-svc { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.v-svc > li { position: relative; }
.v-svc-card { height: 100%; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 14px 14px 22px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.v-svc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -24px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.v-svc-card > :not(.v-svc-ill) { margin-inline: 8px; }
.v-svc-ill { position: relative; height: 172px; border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, var(--brand-soft) 0%, var(--tint) 60%); overflow: hidden; }
.v-svc-ill .v-sh-ill { position: absolute; left: 50%; top: 10px; width: 460px; max-width: none; height: 320px; margin: 0; transform: translateX(-50%) scale(.48); transform-origin: top center; }
.v-svc-tag { align-self: start; margin-top: 8px; font-size: 12.5px; font-weight: 700; background: var(--tint); border-radius: 999px; padding: 4px 11px; }
.v-svc-card h2 { font-size: 22px; }
.v-svc-card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.v-svc-foot { margin-top: auto !important; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); }
.v-svc-price { font-weight: 800; font-size: 17px; }
.v-svc-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: var(--brand-dark); }
.v-svc-go i { font-style: normal; transition: translate .2s ease; }
.v-svc-card:hover .v-svc-go i { translate: 4px 0; }
.v-svc > li:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; display: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-weight: 800; right: -32px; top: 68px; box-shadow: 0 0 0 5px var(--tint); pointer-events: none; }
@media (min-width: 900px) { .v-svc > li:not(:last-child)::after { display: grid; } }

/* ---------- Marketing Digital (design novo) ---------- */
/* Marketing: o site ao centro com os 4 serviços à volta, ligados por linhas tracejadas */
.v-mk-scene { position: relative; width: 100%; max-width: 460px; height: 340px; margin: 0 auto; }
.v-mk-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-mk-lines path { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, #fff); stroke-width: 2; stroke-dasharray: 6 7; }
.v-mk-site { position: absolute; left: 50%; top: 50%; width: 46%; translate: -50% -50%; background: var(--surface); border-radius: 14px; box-shadow: 0 24px 40px -20px rgba(0,0,0,.5); overflow: hidden; }
.v-mk-site .v-mk-pg { padding: 12px; display: grid; gap: 7px; }
.v-mk-site .v-mk-pg b { height: 10px; width: 70%; border-radius: 4px; background: var(--ink); }
.v-mk-site .v-mk-pg i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, #fff); }
.v-mk-site .v-mk-pg i.s { width: 60%; }
.v-mk-site .v-mk-pg span { width: 56px; height: 14px; border-radius: 999px; background: var(--brand); margin-top: 2px; }
.v-mk-node { position: absolute; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; box-shadow: 0 16px 28px -16px rgba(0,0,0,.55); }
.v-mk-node svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-mk-node.n1 { left: 4%; top: 6%; background: var(--dark); color: var(--brand-light); }
.v-mk-node.n2 { right: 4%; top: 6%; background: var(--surface); color: var(--brand); }
.v-mk-node.n3 { left: 4%; bottom: 6%; background: var(--surface); color: var(--brand); }
.v-mk-node.n4 { right: 4%; bottom: 6%; background: var(--brand); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .v-mk-node { animation: v-mk-bob 4s ease-in-out infinite; } .v-mk-node.n2 { animation-delay: -1s; } .v-mk-node.n3 { animation-delay: -2s; } .v-mk-node.n4 { animation-delay: -3s; }
    .v-mk-lines path { animation: v-mk-dash 1.2s linear infinite; }
}
@keyframes v-mk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes v-mk-dash { to { stroke-dashoffset: -26; } }

/* Intro e cartões dos 4 serviços (ilustração à esquerda, texto à direita no computador) */
.v-mk-intro { display: grid; gap: 12px; max-width: 760px; margin-bottom: 28px; }
.v-mk-intro h2 { font-size: clamp(28px, 4vw, 40px); margin: 0; }
.v-mk-intro p { margin: 0; font-size: 18px; color: var(--muted); }
.v-mk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.v-mk-pills span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.v-mk-pills span::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: var(--brand-soft); color: var(--brand-dark); }
.v-mk { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .v-mk { grid-template-columns: 1fr 1fr; } }
.v-mk > li { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 14px; transition: transform .25s ease, box-shadow .25s ease; }
.v-mk > li:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -22px rgba(0,0,0,.5); }
@media (min-width: 560px) { .v-mk > li { grid-template-columns: 190px 1fr; align-items: start; } }
.v-mk-body { padding: 6px 6px 8px; display: grid; gap: 8px; }
.v-mk-body h3 { font-size: 20px; }
.v-mk-body p { margin: 0; color: var(--muted); font-size: 15px; }
.v-mk-warn { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; margin-top: 4px; font-size: 13px; color: var(--ink); background: #FFF3CD; border-radius: 12px; padding: 9px 11px; }
.v-mk-warn::before { content: "!"; width: 20px; height: 20px; border-radius: 50%; background: #6B4E00; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.v-mi { position: relative; height: 150px; border-radius: 18px; background: var(--tint); overflow: hidden; }
/* Automações: pedido entra, raio, resposta automática */
.v-mi-auto .bq, .v-mi-auto .ba { position: absolute; display: grid; gap: 5px; padding: 9px 11px; border-radius: 14px; width: 112px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.4); }
.v-mi-auto .bq { left: 12px; top: 16px; background: var(--surface); border-top-left-radius: 4px; }
.v-mi-auto .ba { right: 12px; bottom: 16px; background: var(--brand); border-top-right-radius: 4px; }
.v-mi-auto i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 35%, #fff); }
.v-mi-auto .ba i { background: rgba(255,255,255,.75); }
.v-mi-auto i.s { width: 60%; }
.v-mi-auto .bolt { position: absolute; left: calc(50% - 18px); top: calc(50% - 18px); width: 36px; height: 36px; border-radius: 50%; background: var(--dark); color: #F2C230; display: grid; place-items: center; }
.v-mi-auto .bolt svg { width: 18px; height: 18px; fill: currentColor; }
/* Email: envelope que sai para 3 contactos */
.v-mi-mail .env { position: absolute; left: 18px; top: calc(50% - 24px); width: 64px; height: 48px; border-radius: 8px; background: var(--surface); box-shadow: 0 10px 20px -12px rgba(0,0,0,.45); overflow: hidden; }
.v-mi-mail .env::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, var(--border) 50%, transparent 51%), linear-gradient(to bottom left, transparent 49%, var(--border) 50%, transparent 51%); background-size: 50% 60%; background-repeat: no-repeat; background-position: left top, right top; }
.v-mi-mail .fly { position: absolute; left: 70px; top: calc(50% - 8px); width: 22px; height: 16px; border-radius: 3px; background: var(--brand); }
.v-mi-mail .to { position: absolute; right: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: 0 6px 12px -8px rgba(0,0,0,.45); }
.v-mi-mail .to.t1 { top: 22px; } .v-mi-mail .to.t2 { top: calc(50% - 13px); } .v-mi-mail .to.t3 { bottom: 22px; }
/* Redes sociais: publicação com coração e calendário */
.v-mi-social .post { position: absolute; left: 16px; top: 14px; width: 92px; padding: 6px; background: var(--surface); border-radius: 10px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.45); display: grid; gap: 5px; }
.v-mi-social .post .img { height: 58px; border-radius: 6px; background: linear-gradient(135deg, var(--brand-soft), #E6A38B); }
.v-mi-social .post i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, #fff); }
.v-mi-social .heart { position: absolute; left: 86px; top: 56px; width: 30px; height: 30px; border-radius: 50%; background: #E0245E; color: #fff; display: grid; place-items: center; }
.v-mi-social .heart svg { width: 15px; height: 15px; fill: currentColor; }
.v-mi-social .cal { position: absolute; right: 14px; bottom: 16px; width: 70px; padding: 7px; background: var(--surface); border-radius: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.45); }
.v-mi-social .cal b { aspect-ratio: 1; border-radius: 3px; background: var(--tint); }
.v-mi-social .cal b.on { background: var(--brand); }
/* Drone: a pairar sobre o edifício, com a moldura da câmara */
.v-mi-drone .bld { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 120px; height: 46px; background: linear-gradient(var(--surface), var(--surface)) 10px 10px / 30px 36px no-repeat, linear-gradient(var(--surface), var(--surface)) 46px 0 / 34px 46px no-repeat, linear-gradient(var(--surface), var(--surface)) 86px 16px / 26px 30px no-repeat; }
.v-mi-drone .cam-frame { position: absolute; left: 50%; bottom: 4px; translate: -50% 0; width: 132px; height: 62px; background: linear-gradient(var(--brand), var(--brand)) top left / 14px 2px, linear-gradient(var(--brand), var(--brand)) top left / 2px 14px, linear-gradient(var(--brand), var(--brand)) top right / 14px 2px, linear-gradient(var(--brand), var(--brand)) top right / 2px 14px, linear-gradient(var(--brand), var(--brand)) bottom left / 14px 2px, linear-gradient(var(--brand), var(--brand)) bottom left / 2px 14px, linear-gradient(var(--brand), var(--brand)) bottom right / 14px 2px, linear-gradient(var(--brand), var(--brand)) bottom right / 2px 14px; background-repeat: no-repeat; }
.v-mi-drone .dr { position: absolute; left: calc(50% - 40px); top: 16px; width: 80px; height: 30px; }
.v-mi-drone .dr .body { position: absolute; left: 28px; top: 10px; width: 24px; height: 12px; border-radius: 6px; background: var(--dark); }
.v-mi-drone .dr .arm { position: absolute; top: 15px; left: 8px; right: 8px; height: 3px; background: var(--dark); border-radius: 2px; }
.v-mi-drone .dr .rot { position: absolute; top: 6px; width: 26px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--dark) 45%, transparent); }
.v-mi-drone .dr .rot.l { left: -4px; } .v-mi-drone .dr .rot.r { right: -4px; }
.v-mi-drone .dr .cam { position: absolute; left: 36px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .v-mi-auto .bq { animation: v-mi-in 4s ease-in-out infinite; }
  .v-mi-auto .bolt { animation: v-mi-zap 4s ease-in-out infinite; }
  .v-mi-auto .ba { animation: v-mi-out 4s ease-in-out infinite; }
  .v-mi-mail .fly { animation: v-mi-fly 2.4s ease-in-out infinite; }
  .v-mi-mail .to { animation: v-mi-ping 2.4s ease-out infinite; } .v-mi-mail .to.t2 { animation-delay: .25s; } .v-mi-mail .to.t3 { animation-delay: .5s; }
  .v-mi-social .heart { animation: v-mi-heart 2.6s ease-in-out infinite; }
  .v-mi-social .cal b.on { animation: v-mi-blink 2.6s steps(1) infinite; }
  .v-mi-drone .dr { animation: v-mi-hover 3s ease-in-out infinite; }
  .v-mi-drone .dr .rot { animation: v-mi-spin .18s linear infinite; }
}
@keyframes v-mi-in { 0% { opacity: 0; translate: -10px 0; } 12%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes v-mi-zap { 0%, 25% { scale: .6; opacity: .3; } 35% { scale: 1.15; opacity: 1; } 45%, 85% { scale: 1; opacity: 1; } 100% { opacity: .3; } }
@keyframes v-mi-out { 0%, 40% { opacity: 0; translate: 10px 0; } 55%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes v-mi-fly { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: 120px 0; opacity: 0; } }
@keyframes v-mi-ping { 0%, 60% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes v-mi-heart { 0%, 40% { scale: .2; opacity: 0; } 55% { scale: 1.2; opacity: 1; } 65%, 90% { scale: 1; opacity: 1; } 100% { opacity: 0; } }
@keyframes v-mi-blink { 0%, 50% { background: var(--brand); } 51%, 100% { background: var(--brand-light); } }
@keyframes v-mi-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes v-mi-spin { 50% { scale: .4 1; } }

/* Menu Serviços: Marketing Digital no fim, separado por uma linha */
.dropdown-menu a.dropdown-sep { margin-top: 6px; position: relative; }
.dropdown-menu a.dropdown-sep::before { content: ""; position: absolute; left: 14px; right: 14px; top: -4px; height: 1px; background: var(--border); }

/* Serviços: faixa para o Marketing Digital por baixo dos 3 serviços */
.v-mkt-strip { margin-top: 28px; display: grid; gap: 20px; align-items: center; background: var(--brand-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 24px; padding: 24px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.v-mkt-strip:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -24px rgba(0,0,0,.45); }
@media (min-width: 860px) { .v-mkt-strip { grid-template-columns: auto 1fr auto; gap: 32px; padding: 26px 32px; } }
.v-mkt-icons { display: flex; gap: 10px; }
.v-mkt-icons span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--brand-dark); box-shadow: 0 8px 16px -12px rgba(0,0,0,.4); }
.v-mkt-icons span:last-child { background: var(--brand); border-color: var(--brand); color: #fff; }
.v-mkt-icons svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) { .v-mkt-icons span { animation: v-mk-bob 4s ease-in-out infinite; } .v-mkt-icons span:nth-child(2) { animation-delay: -1s; } .v-mkt-icons span:nth-child(3) { animation-delay: -2s; } .v-mkt-icons span:nth-child(4) { animation-delay: -3s; } }
.v-mkt-k { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-dark); }
.v-mkt-t { margin: 0; font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.v-mkt-s { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 52ch; }
@media (min-width: 860px) { .v-mkt-strip .v-btn { white-space: nowrap; } }
.v-mk-node svg { width: 30px; height: 30px; }

/* Aviso do drone: nota discreta com ícone de calendário, sem caixa */
.v-mk-body .v-mk-warn { display: flex; gap: 8px; align-items: center; background: none; padding: 0; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--brand-dark); }
.v-mk-body .v-mk-warn::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 0; color: inherit; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Páginas legais (design novo): índice fixo à esquerda, secções em cartão ---------- */
.v-lg-hero h1 { max-width: none; }
.v-lg { display: grid; gap: 24px; }
@media (min-width: 900px) { .v-lg { grid-template-columns: 280px 1fr; gap: 40px; } .v-lg-toc { position: sticky; top: 96px; align-self: start; } }
.v-lg-toc { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; min-width: 0; }
.v-lg-toc p { margin: 0 0 8px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.v-lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-lg-toc a { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink); }
.v-lg-toc a span { font-size: 12px; font-weight: 800; color: var(--brand-dark); }
.v-lg-toc a:hover { background: var(--tint); }
@media (max-width: 899px) { .v-lg-toc ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .v-lg-toc a { white-space: nowrap; background: var(--bg); border: 1px solid var(--border); } }
.v-lg-body { display: grid; gap: 14px; min-width: 0; }
.v-lg-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 24px; scroll-margin-top: 96px; }
.v-lg-h { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.v-lg-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); }
.v-lg-ic svg { width: 22px; height: 22px; }
.v-lg-sec h2 { font-size: 21px; display: flex; gap: 10px; align-items: baseline; margin: 0; }
.v-lg-sec h2 span { font-size: 13px; font-weight: 800; color: var(--brand-dark); }
.v-lg-sec p, .v-lg-sec li { margin: 0 0 12px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 68ch; }
.v-lg-sec p:last-child { margin-bottom: 0; }
.v-lg-sec a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-col a.footer-social svg { flex: none; }

/* Perguntas frequentes: título e lista centrados na página (o texto das perguntas fica alinhado à esquerda) */
.v-faq-sec .v-head { margin-inline: auto; text-align: center; }
.v-faq-sec .v-faq { margin-inline: auto; }
.v-faq-sec .container > .v-link { display: flex; width: fit-content; margin-inline: auto; }
/* Rodapé: cada contacto (email, telemóvel, Instagram) na sua linha, com o ícone alinhado ao texto */
.footer-col a.footer-social { display: flex; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
/* Rodapé no telemóvel: links com 44 px de altura para tocar com o dedo */
@media (max-width: 760px) { .footer-col a { min-height: 44px; display: flex; align-items: center; padding: 0; } }
/* Rodapé no computador: a coluna Contacto fica com a largura do email, que nunca parte a meio */
@media (min-width: 961px) { .footer-cols { grid-template-columns: auto auto auto; justify-content: space-between; } }
@media (min-width: 641px) { .footer-col a.footer-social { white-space: nowrap; overflow-wrap: normal; } }

/* ---------- Página de erro 404 ---------- */
.v-404 { padding: 40px 0 72px; background: radial-gradient(120% 70% at 100% 0%, var(--brand-soft) 0%, transparent 55%); overflow-x: clip; }
.v-404-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .v-404-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.v-404 h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
.v-404-code { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--brand-dark); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.v-404 .v-lead { margin: 14px 0 22px; }
.v-404-links { margin-top: 26px; }
.v-404-links p { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.v-404-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-404-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; transition: border-color .2s ease, transform .2s ease; }
.v-404-links a:hover { border-color: var(--brand); transform: translateY(-2px); }
.v-404-links a::after { content: "→"; color: var(--brand-dark); }
.v-404-ill { position: relative; width: 100%; max-width: 440px; height: 320px; margin: 0 auto; }
.v-404-win { position: absolute; left: 0; top: 20px; width: 86%; height: 250px; background: var(--surface); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 26px 44px -22px rgba(0,0,0,.45); overflow: hidden; }
.v-404-win .v-ill-bar { height: 26px; }
.v-404-pg { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-404-pg span { height: 54px; border-radius: 10px; background: var(--tint); }
.v-404-pg span.h { grid-column: 1 / -1; height: 14px; width: 60%; background: var(--ink); border-radius: 4px; }
.v-404-pg span.gap { background: none; border: 2px dashed color-mix(in srgb, var(--brand) 60%, #fff); display: grid; place-items: center; color: var(--brand-dark); font-weight: 800; font-size: 20px; }
.v-404-pg span.gap::before { content: "?"; }
.v-404-lens { position: absolute; right: 2%; bottom: 8px; width: 120px; height: 120px; }
.v-404-lens .glass { position: absolute; left: 0; top: 0; width: 86px; height: 86px; border-radius: 50%; border: 9px solid var(--dark); background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: 0 18px 30px -16px rgba(0,0,0,.55); }
.v-404-lens .handle { position: absolute; left: 74px; top: 74px; width: 46px; height: 14px; border-radius: 7px; background: var(--brand); transform: rotate(45deg); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .v-404-lens { animation: v-404-search 5s ease-in-out infinite; }
  .v-404-pg span.gap { animation: v-404-blink 2s ease-in-out infinite; }
}
@keyframes v-404-search { 0%, 100% { translate: 0 0; } 30% { translate: -150px -40px; } 60% { translate: -60px -110px; } }
@keyframes v-404-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 520px) { .v-404-ill { height: 280px; } @keyframes v-404-search { 0%, 100% { translate: 0 0; } 30% { translate: -110px -30px; } 60% { translate: -40px -90px; } } }