feat(mobile): hero fixo com mergulho e legendas no celular e no tablet

Hero compacto no celular (numeros em uma linha; servicos e redes ficam no menu
e no rodape) para caber em uma tela e ficar fixo a partir de 700px de altura.
A camera calcula o enquadramento pela proporcao da tela: em pe, se afasta
para cada camada caber na largura. Legendas em tamanho de celular.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/components/Hero.tsx

@@ -118,20 +118,21 @@ export default function Hero({ stats }: { stats?: HeroStats }) {
         <div className="hero-foot relative mx-auto flex w-full max-w-[max(1400px,var(--shell))] flex-wrap items-end justify-between gap-sp-5 px-sp-6 pb-sp-5 lg:px-sp-12">
           <div className="flex flex-wrap items-end gap-x-sp-8 gap-y-sp-4 border-t border-white/10 pt-sp-4">
             {items.length > 0 && (
-              <dl className="flex flex-wrap gap-x-sp-8 gap-y-sp-4">
+              <dl className="flex gap-x-sp-5 gap-y-sp-4 sm:flex-wrap sm:gap-x-sp-8">
                 {items.map(([value, label]) => (
                   <div key={label} className="flex flex-col-reverse">
                     <dt className="text-[13px] leading-[1.4] text-[rgba(244,242,237,.64)]">
                       {label}
                     </dt>
-                    <dd className="font-mono text-[clamp(24px,1.1rem+0.8vw,36px)] font-semibold leading-none tracking-[-0.03em] text-[var(--slash)]">
+                    <dd className="font-mono text-[clamp(22px,1.1rem+0.8vw,36px)] font-semibold leading-none tracking-[-0.03em] text-[var(--slash)]">
                       {value}
                     </dd>
                   </div>
                 ))}
               </dl>
             )}
-            <div>
+            {/* no celular, serviços e redes ficam no menu e no rodapé: assim o hero cabe numa tela e pode ficar fixo */}
+            <div className="max-lg:hidden">
               <ul className="flex flex-wrap gap-x-sp-5 gap-y-sp-2 text-[14px] leading-[1.5] text-[rgba(244,242,237,.8)]">
                 {["Sistemas web", "Aplicativos", "Integrações"].map(
                   (service) => (