/* Gerado a partir dos `<style>` que viviam dentro do HTML (29/09/2026).
   Arquivo .css em /styles E SERVIDO pela plataforma, e ao contrario do CSS inline ele
   tem ETag, entao a segunda visita revalida com 304 em vez de baixar tudo de novo.
   NAO passa pela compiladora: sem `@apply`, e `rgb(a b c / d)` aqui funciona.
   A ORDEM DOS BLOCOS ABAIXO E A ORDEM QUE ELES TINHAM NO DOCUMENTO. Nao reordenar. */

/* ===================== heroi: texto e vitrine ====================== */
/* Topo da home: texto a esquerda, duas colunas de produtos correndo a direita.
   O cartao e o MESMO `catalog-card` do catalogo, entao a vitrine acompanha qualquer
   mudanca futura de cartao sem ter estilo proprio para manter.
   A coluna tem 274px com 12px de recheio lateral e o cartao 250: a folga existe porque
   `overflow:hidden` cortaria a sombra do hover rente a borda. */
/* `padding-block` e nao o atalho `padding`: o atalho zerava o padding lateral que vem do
   `.container`, e abaixo da largura maxima o texto encostava na borda. */
.how-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;padding-block:10px 20px}
/* Sobe o hero para comer o vao de 72px acima dele, que vem da plataforma (48 do `py-12`
   do envolucro e 24 do `space-y-6`, que poe margem em todo irmao que nao seja o primeiro,
   e este `<style>` conta como irmao).
   O seletor precisa de (0,3,1) para ganhar de `.space-y-6 > :not([hidden]) ~ :not(...)`,
   que vale (0,3,0). Com `.how-hero` sozinho (0,1,0) nao acontecia nada, e sem avisar. */
section.how-hero.container:not([hidden]){margin-top:-28px}
.how-hero-txt,.how-hero-vitrine{position:relative;z-index:1}

/* ---------------- lado esquerdo ---------------- */
.how-hero-txt{min-width:0}
.how-hero-tp{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:rgb(var(--muted-foreground));font-size:14.5px;text-decoration:none;flex-wrap:wrap}
.how-hero-tp-estrelas{display:inline-flex;gap:3px}
.how-hero-tp-e{display:grid;place-items:center;width:23px;height:23px;background:#00b67a}
.how-hero-tp-e svg{width:15px;height:15px;fill:#fff}
.how-hero-tp-marca{display:inline-flex;align-items:center;gap:5px;color:rgb(var(--foreground));font-weight:650}
.how-hero-tp-marca svg{width:17px;height:17px;fill:#00b67a}
.how-hero-tp:hover .how-hero-tp-marca{text-decoration:underline;text-underline-offset:3px}

.how-hero-txt h1{margin:0 0 14px;font-size:clamp(34px,4.4vw,56px);font-weight:800;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.how-hero-txt h1 .text-primary{color:rgb(var(--how-violeta))}
.how-hero-sub{margin:0 0 26px;max-width:46ch;color:rgb(var(--muted-foreground));font-size:clamp(15px,1.3vw,16.5px);line-height:1.6}

.how-hero-acoes{display:flex;flex-wrap:wrap;gap:12px}
.how-hero-b{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:650;text-decoration:none;transition:background-color .22s ease,border-color .22s ease,transform .4s cubic-bezier(.34,1.5,.64,1)}
.how-hero-b svg{width:17px;height:17px}
.how-hero-b1{background:rgb(var(--how-violeta));color:#fff}
.how-hero-b1:hover{background:rgb(var(--how-violeta) / .85);transform:translateY(-2px)}
.how-hero-b2{border:1px solid rgb(var(--how-violeta) / .5);background:rgb(var(--how-noite) / .6);color:rgb(var(--foreground))}
.how-hero-b2:hover{border-color:rgb(var(--how-violeta));background:rgb(var(--how-grafite));transform:translateY(-2px)}

/* ---------------- vitrine ---------------- */
/* O esmaecido das pontas e MASCARA e nao degrade solido: degrade ate `#0a0a0a` taparia o
   brilho roxo do fundo do site naquelas faixas. */
.how-hero-vitrine{position:relative;display:grid;grid-template-columns:repeat(2,274px);gap:24px;height:58vh;min-height:420px;max-height:620px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* A VITRINE E ANIMADA PELO CSS (30/09/2026), e nao mais por `requestAnimationFrame`.
   O `scripts/home-hero.js` so mede a altura de um conjunto e entrega aqui:
     --how-volta  altura de UM conjunto de cartoes, com o vao
     --how-giro   quanto tempo leva para andar essa altura (volta / 100px por segundo)
   Medido no computador, com o heroi na tela: escrevendo `style.transform` por quadro dava
   **362 recalculos de estilo por segundo e 600ms de CPU por segundo**, porque cada escrita
   invalidava o estilo da coluna e dos 60 cartoes dentro dela. Sem a vitrine a pagina ficava
   em 10 por segundo. Era isso que fazia o site inteiro parecer 30fps.
   Como animacao, o compositor cuida sozinho: nao ha recalculo nem layout por quadro.

   `linear` e obrigatorio: qualquer aceleracao faz a emenda entre o conjunto e a copia
   aparecer, que e justamente o que esta vitrine existe para esconder. */
@keyframes how-vitrine-sobe{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(var(--how-volta) * -1),0)}}
@keyframes how-vitrine-desce{from{transform:translate3d(0,calc(var(--how-volta) * -1),0)}to{transform:translate3d(0,0,0)}}
.how-hero-col{display:flex;flex-direction:column;gap:16px;padding:0 12px;will-change:transform}
.how-hero-col.is-rodando{animation:how-vitrine-sobe var(--how-giro) linear infinite}
.how-hero-col.is-rodando[data-dir=down]{animation-name:how-vitrine-desce}
/* Os dois seletores abaixo valem (0,3,0) e ganham do (0,2,0) do `.is-rodando`, que traz
   `running` embutido no atalho `animation`. Trocar por seletor mais curto quebra a pausa. */
.how-hero-vitrine.is-parada .how-hero-col.is-rodando{animation-play-state:paused}
.how-hero-col.is-rodando:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.how-hero-col.is-rodando{animation:none}}
/* o cartao e o mesmo do catalogo (`catalog-card`), entao a vitrine acompanha
   qualquer mudanca futura de card sem ter estilo proprio para manter */
.how-hero-col .hc-card{flex:none}

@media(max-width:1200px){.how-hero{gap:26px}}
@media(max-width:1023px){
  .how-hero{grid-template-columns:minmax(0,1fr);gap:0;padding-block:12px 22px;justify-items:center;text-align:center}
  section.how-hero.container:not([hidden]){margin-top:-24px}
  .how-hero-vitrine{display:none}
  .how-hero-sub{margin-inline:auto}
  .how-hero-acoes{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.how-hero-b{transition:none}}

/* ===================== heroi: grade do fundo ======================= */
/* AS ARTES FICAM EM VARIAVEL, DECLARADAS UMA VEZ.
   Elas eram escritas duas vezes cada, em `-webkit-mask-image` e em `mask-image`:
   4 copias para 2 artes, ou seja 26 KB de pura repeticao. Apontado pelo Codex. */
:root{
  --how-grade-arte-1: url("data:image/png;base64,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");
  --how-grade-arte-2: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABOIAAADMCAQAAAB0ZsSYAAAts0lEQVR42u19CVtbR7atEJoQkhAgxDzaZjAYsAGD8TwPwVO3MzmJk+4kt9NO0v1e9+133+37vd9ebx0BtkYmg2rvXetbnwdAnLOHql2rqnbtirkYQRAEQRAEoQ00AUEQBEEQBEkcQRAEQRAEQRJHEARBEARBkMQRBEEQBEGQxBEEQRAEQRAkcQRBEARBEARJHEEQBEEQBEkcQRAEQRAEQRJHEARBEARBkMQRBEEQBEGQxB2EDprrRKDdCLaIDmpMnak9bUIcyWodZ7US13G8hxMncQktEgDi9Dj15YBN7Y1HuTitcIJ2FD9eWzqJYzrpmhM1Z3ZydvCP2ncEGJroYXqY/g6lNZAntMlqJ3tVp0vQQcfu5LRZLUK2Rwe0Dy88haRvZ3CDeiJgGhMPrHUfJb5xtDs+QzhR1Di5k5IuRTcd22bs6tVIBtyCwtM9RW2ND0HhTkeTjOY107Uk1yWP2XuSJ58EfdqLUyRyx56fpNi8q+yRCpbWxl06sJYQkr7x4Ib1cOMaY3p9TE/QDsfkUZ9Eej990yCD4Ewid5wun+Z6XFWXTwfb5ZOBaR7SOnRnYCQu3LWoZHCTsYPbQYaj2zGn8p+8EHY6juuC60jkjk5cujh3q7JGqN0+agcdga1YhLMulWRLDoS0MJJ/jOS0xvEWwE5l7Du9xpzljORY87csZywfOn820NW4FPpMWGvQoejaFdSkNhNcBuDHUY9j3j4lyQbaCk5mrS4gIe/GhqTrJhM/hhu72eg/LCrngqS0HdA7pDyxbDC65gIicfFAqUwUwTna7dN4Lkocp790n+Ze3OmvLeRI5I7szK6ggv3BATFMS6TRncPRNh9IZOiAprGAVh1TQUbvPGP3niW6g91OP8mYnz/tPcuzSdXLB7ad8CmktxDUltpBWxOFAOdyHdA6EdD6VCKQtpwLisyEOBj3cOVpbxpa4I7SkVfges4i6eysxM24Ivg5idxRbFWAc2mpiND2BGiHVECDYFcgE5Y0NA1ndTUVZMwmcdlNB+F65FEPffSc1R7l2S6y9pHIHXFwK7K2ToXQFANsL+GsxYWyeRzlBofi0Z4AKVyRFM5FOfBFHuw44sG94lkmmZ19wnovUx6PRF96A5q9t0YWdugMLhj2ulAyH8MY8nuCoeW9wdGZTkbqvYlKLxcejkTg+s76AEx7Th72BZW+/Sl2It3Nuv7grNATyLDQ4UpB6FkKZH0ig1Xk0ChcX0BnrA+ajPVwDe7QaNeNSNCGA3vtS37tD2aL4VNmNyVaqTJ36QhsLS6UYT8Egp4IZGW1A96MBzYsk8JF8bnEtcgjELiBduULtjcZlM4/fI5Tgp06giez/YHZoBDIecZiABEgDS1jQZw1LgRH4ULfUerAClyJ26iHjl9lTOTadmdL+5dhy5zLHDqgDwS/rdoTyED4sWeUg6Ct+QDO4uaCIOSdbjCwKNUX4CGOWF3mdjmYWo8nX6ccQEtp66V7PhpCP7o/iVzswNOq5eCyTRrXbMKicfkghohsAFuN/UEUUikGFqFCi0fNJifDrGl6yBr8IHp/24/6+FN2iIcdDtlWLQe+bF0KauYbdyMB+DuBfm9dx8H2zsO9+bEzKAo34MIuxT6AeMxjdwdxmhLg5ay2zzn5MJn9Iduqw0ET3TiGw0Jg2+j2tRw1vh0TkfEQthZzLqTkjsGgNxG70GtzHJEPIHBlxG5vXCbmOQFwBOqTyLVejxvB9lNHwDRuOKDVuGj4t98XhoyvU2UQ0WLmS4uMuJAo3HDQMbgP3k5yNG7ZFwZ9x20JO+1jMAPPu7TqQr2YBSUCXsYfCygXJYeeYH+TvGB8PdV+1t9YQOsyRcTfzoCPMoyiPfPWpVYEbgj28b5bJmXwGsNyJIlcK+uMB5xUG9G4cDZVh83XCSxgZm97o7FgPh6NBUThxgIelwpugkcQWxK4YVhHRF+PCTqdN0Ei15LIjAaR9t5K+4lgZv4ZEHb7wY80XDMmgilIHk2fE8HejDqCtszxuNWxnik593zHhN3ENxn8mczWtpkIoMZWq04zHYzuI8ZXXeNuxrR+M8Y3nwoB5PzF9jK2J4Mdi7oRcXs46jYlt2XYRtQWszwT9YHjksg1t81UsAfd0wio6UBOglmnAVOGe3faOEVNmvZerSenAj1yF8coM8W7lZpapoT+3SctPssMFH1uFguWJHKNjWgIs4BkoDkI04EE1SEUjLS91phjvpjTWsh4kNHGvOYlHmVoMvb2g8CJvC1Y7oxvyM2hMWWJOgy5+UDtMoROFIKePe68af3GKlfv2cQwKKpdz+UQe3oC6IE5dw7RJsQYW3IXkH/NUbbRLkIJnGQSt0vkht0CcA5baRPA5B4m9v6e+PD1xIev6v+3+9VEHSZrPjVZ9ezJmqd8/FP/pGo5qj8z2eQtjV9PNvlOo3YTLfSehEUiq1RLMVn3hIma36n9d6Lhec11qf1sM0vWWmyy4UkTdU+aaIHJptaut2H03AUQHPv+n8ZgeZD/q39Ln/+nsc5+Uv9L7/+z0O7s+78v/1dr56f/t8P/04gysuP/2fg/ijrTwuN/+/v/dIWDDElem9RwRuZC8LfWNWIAVgnxmEM/SFzK2S/yPGf4BGASbdeqbucMb8Il0ffsp3JErbMU5FGG84FslR8nDg8gEosvdayjW41iDtjLRlXX6S4EecyhjLaQCkDLKcPaLZotn7roLJf4LQZQ3HY2wKjaiT2vWVaEq7NJGStwUxqmLXrmR6PgxCRyjTZJufBo3PkAaqjPGr4397zRdcZurMTZnTTOBbECXnbh3coQpajwKEOspqDXHDZSlURgXaRlBrv2JHKxmkuM5gNc/I9W4zrN39hot1jFuNFeXEAOjVWf2Y+8ndjbKAc5gvRzJK0hcPOIvYqm0BrnugvGL+45LrWdx6AY2nrcCGaP1nU8Z7bcZglryBb1GjU7oepD1LXe36Lsp9C2DKeDSE6JHaNE0CzirrI9EJ1M+SJyTzh7iFVVFrsY0JXUsb3LfybMB5RFs6uMNo82XDDbCxfNx5dJ8/Ek1nDR5aLRydRJ4+15QGE71zszXARnzrPpVQ34oc0jZwxvXsX28uKGjWbhrJjUa8XoJn+/+Z42ZvymjWYpDYvBTfwPIrQX9E7BdC/xXyKRqxoYJ2GPdFCbAReNE9cut2qUFqwabKmd0Cpm8gKqZeNbbiPYLO50IV1ieDGArOKjE7g5t6Q5RUv/HPFSsBekNGLQXQ6q1o99GjdlVL95g+Uq8kbPb46aLncTUbiLQRGaQZByVoT72GeXtadmxUykSa9gMZxEbn+jKiRbRPqOmqapKya9OWFwGBkymVWVdpum1+FG0cPCSe1PYMljiUcZKshi/fWyhUlyzMx5t1XT1dJjx8rvWA2ocGMa2o4yW8dpu3FkxmAGY9Fk5umo8VgZzqhRgLaTIHIcI9No12to2SZsYWmOMQZeTSK3O0ReQeJqOB3ysuEq6wm3geAbM1c6dtmcTssG/RT1rbThOHk5oPFiymQkOUmbPufWwRbMkFlr7hkHfTlPIgcLzMMS6WC0XTNM44axAWKPml41p9O2s3i3xoDpqW4oETKDs6iLHBcRd8YxVozZWo202FwvuOv4wwYbNddyMDfJbhq+pmrdYNnfdWM9tNvg2dQeRBDLESMdzA03m0aLFR2XwK3jj7ntZKvzjlksHU8GT+QysMKFQHIgutFBc2aL415y9jLIysZqqdm702DD7CSwG7p1uzCoywwiY3fgI2ECh4628MfkWGiZwMyho04F33jPYeMqDDJbxIaWVU3tFQUYNXa04Zy5grhDBre898eGa4HcOJ2DD2cCP8qQQM/cxqQxY1VD6ytRc1hIHnKhX8q1GQiZHcJsK2OUoG4ZC8UlY5eKrZijBVsmT9tGo8JmIHXSxpBYVHJhE7gpdwP54RnLWoawpTiPcBQ2kcsgX2fVdkM2T+MuGyPiGXjKFuXJGSMA80Zj4RZ0CyHmXw4k5h/Uhm/ABkXreoZCYuaxoBp2auc0thCGg9Bz22ToyrhbxtbiLOmTgDa2WpvVXrQdxK5Eyd0MgqrGDjjTvw0aWwxB13Cc2osD5WETuQwW12cDyI+YgZ4WtbwAgmpJn01DITaKLjFTx04WnMW7iK8b60PNJxSzGOlyQddJ3UZ/LIaib1jO7UUnvmH8ts3DuvcNhDL7NG7TII1LGPPdrKFrqiagjSWyc8fgOlwCUWHG2b8N9EYQU/VW6ENZnDWM9AHpHJ6TR9DIbwZTP625/ufMazln7iBArHIC0lLZ30lD2syZujd10SDZSSAi2Kdwk+5uwLtNfahHsR4WgQuTxO0SmVtwd1+gTb2rki1gfT1uyeA9B0l331CrzSNL04ouVw0NHV3msi8jXDIYD+r9tgFkgiVwV9Fue0PUPdx981G4/GoAW4uxFtfp3DF9sfVu2F42eP/hpiFK+sCMLg8N0Z4rBiODfQrXh950PtDRrB9R8bb58YwkrgWRu4P6TmESuQKa/YJpDZPYOLan4R1Da3F3jfS9AnJtY2aK9Nx19o4EXTce6S6aigvHI3BbmEIFS+BI4mKVWjJ3QeSyQW6rrrh7pjVPYrV11lmbcV8zdK3TmBHiY+eO0XvmSlNcwGTOcqJ/Fj5bDvIoQxYE7nEwF0uSxLmDa4vdQ1HAbJAU9rHpdN8kPGuNxm3jEueYkbzFWSPnbK20sXFj9e4i39wzvdcyA/2mXYgEbhVj12zoBI4krnpVag45BZcDJHJdxvWO9Js1VsjTSgbWONbiYiaONVi5EeYBtoYt9ZV5aNRleIp6HaQ7vHSgJKZ/TzBik8CRxDUhcq+CJHLzoAUlw359ZKyoyg20VBuz6YfORm5fj5E4cNnZKsnz0HA0jyZzSy48AheNVnP4l4yFJK7FsHIFRG4+OCJXwtL0vGGvPjJVxyvrdowEMQt6JBExrPQSS3Fvwpg+tViGdqUACVw0TpHAkcQdGszWsFi7EBiRi7R+bFbniPaUTJVMsHHu9r6BNawBFA+34Is1Q8czorsznxuOZveQ0p8MjMAtwKPLJHAkcUdFNyo/PzG1ehM70jmuJ/hjU7ce6FY0FNKemhii1lFjXn+vWTMR8Z4YIj1F9I8eZ7XG57PAKsJFJVReoJeFePSQJO4Tw9oGQsF6BRuVCz12/97/uvp7zX+6UfPb61Vff/x/9W+sf/hc7e+v1/20+ikbDZ+o/b3a9200oPpJG6g29DlOP67X/Wy95ju1Omw0eftGEymbPa/2pxt1WjVaqfatG019U/t3tZduu5cNz29m3/UG60v0/zOkbJ++/6u1aof/H0KLdvm/2fNPw/+7Omjv/w+xKdx+/59V/3/1oXecvf/b2/9vI0LfPrP4L9P/L6ExCRxJ3ImJ3FX3BajNVEBYhcYbJjVbhGaLZrR5jTp/+j3yTL0OnxloUxb8sI+L6OUXTcavqyBwq0GNRXcqo+8AmQhJ3KcSubvYjZ8OqnrcDsJ6zGRFwB3408rmt/7a+ilQUe06/MFAns49DJhWovVzM7rU4jJi10BQ1Vt3SOBI4k4PZaRgh0TkunEb3QszdCdWU2D2uRm9XqBdatdBuze6QeJi6gvGPjdE4ZZMxuN7QDKg8fY59C2TeZDEnfb61EsMmzPB6HvJvTGp7SX40QaNG0TOpnYdbim/5ima3umfDNiYnubQs5dM1vF8YaQy5NGi2gP0KRI4krgzm7O+RPZIOZj1uJe4qTPn7NVYeoqNPAuaPFRPs9eVD0+X1J9NPYdB00JfSCEyXzIXq1KIwC9db0AE7gEJHEnc2RO5Vxg8BwPRdh1ZSxZp3GcmaNwgEn9TyinENdXy31F/YfxrE+vSKfToZYOk5jUicBjbqIMoX/wqoJ0ukjjvRO41SnHkgtF1xZxW2wgZMRNXPun2TZ/yow07yldJVtATbPSDDXMxasF9GchiwRAKzb8mgSOJa/8awh9xi2UuiG3Vx0g0tabpdXgvZiAP6Gvla3Hfq5b/e+Wt542Jfn0dsBWdcii+/DiI0WUImn5tcBWVJM5pqZ79JhAitwpNrdUJf4IzuBY8s+p0p9X3KV5HfKHa9jdMTGQ20ZNtRaYJ9xa17uyPKjm0v7dYDU6RS5DExTzmYqyiBONNlw+gw32OcJky5buXqL6kX4tvVU8jbiq+6m1S9dnUqEfrn4BeQS+2FZU24Ze+AMaTm4hcqyRwJHEymuNlJJjfMk/kovDypSktU0ilveL0lwHVfL5wUfF66Jbqoti3DExhrqg/2lOLfkTYTfPEJg2/fYnWRwJHEieKyN1yP+OON+tE7oL7ygDtqfbbl+r1Sbl3bljxatZDp/dYg16759Hy9VO4L00lsyy579Af7BO4aAwhgSOJE0kIbiNFc804kcth6NoxpGN0NGBJPbX+TDGZ+J6HMrwQ0FnlrX4NPdcOhcvj8NiO8fzqNHxGAkcSJ74r3kGq5hqaa8x09bi3hmqI5zEYaNfmjRtRK/sPSntLGpJrtfkserDuFh9pkDN0U+gPJm+bqO4t69DxTgDZ4yRxJkjBXfeN8YtS8tBw25Q2uv01Ag1ias+nTim1ud6zqdrb+xw0yJuhN9ehzbDh0SIicH8igSOJ00YL7uHszbzpjhlpmDeTUPwt/mjW4JXaWkvXlUq+rLZAxzxOdGpu6yXkjvUbijzXTe/crLgf0d5GyApI4vShgAIE35kmcvPuJzOV0vvhq5Ji+Ufhi7TSVqSzUMdTtX37nerJVwnyl5wVgvOd6UK38/AVCRxJnGqM4jqRd4aJXAHJ3c+MrMctuP9QrckDd1XpoPyVSrm/Qu/WKPdV1dXtoogzYyR2vgbsbjEuIAfutdI+QhJH1BG5r9CcF8zqdxXazRgJO98rDqoFpUcE0u4vKu39N5XWLiA7SXcbtzElHoMmN82OCWPuDwAJHEmcqVnJn9yfcd+qTe0GoN2mCU0uw0sFp/cColsq5dZIKwaUnu98pLguX0RAV52FfOLboHCjZgncG9wrTgJHEmcQF0EQ3qCJ29xWfaSa/sSqqvDr1SPt/qpS9kcKb4o8h7peGvup3tZdQIL8lolY+Q3aTtoogfscLWyMoz1JnF0sIhB9boLsNFvF+tHEbQ7X1B4RiGT/XGXLua3Q0tcUWvqJWhqUNkLhriC6XDYZ/8dxBdqPCqdjJHHECVbkfkYw7TG5HveTCc22cWZMawHanxTOg88rLHnxhcLkiDJah1YK951K0lyvxUvoUTBK4H5WfZMwSRxx7BW5n1GiwCKR28YZz3H1WtzFmWKtLUvfnZg9aDPaZP4PUKKYutIii2ovOLurPqZMoM3cNRjxexBxfkfcT3NcJ4kLDUvo1BaJ3Dj0uq5ei2fwjU7Jv1ZIorWd9MxAYo3xRmtffKY+ntw3MbltJHDP0BNI4EjiXLjlgLdRXuEzc0SugK79i3qttA4dE7B9TN39qRPKbPy1Ohv/4i6obM+foViFdqrzA3RIm7uz5777u/HbJkjiiCN18Bvu/7odc0Ruw/1v3JinWYMMzlnprOT0Vp3lHyiTeENdwdxlpVToBsqKpJVHwvfKI2EzAncDJ+FvkMCRxBH7RG7H/dv9WoP3df9G/3v/4ev3dT+p/vn7lk9o9obap+w/4f0Bn6/+XONTfv3whH+4/655cv3zm2lYL0n992sla6XZwXas/2m1XvW2/Xed/L+29MrRrPy+4bvvjyz30f3/j4rcvv1f78+D/P8P90+R/v+1hf//Acj1f7Mn7FpYqv9b9/9/Q255/j9O//83bO/f/6fd/0ngSOKIJkTun/gzif/ZwU3oNKtY/kH3G2o66ZN7ByVdNck7i+IEmuT9WVmrfq6yFT8HXSgrjh4r7j+xxmwpng+6F+5/oBMJHEkc0YLIPcc5n6umdFoGDbqt2ie/KbwHoQftKK1q6/pfquz7L1XWLbr/pzBd4xZ6nuYkk0egcJOGInkGHvlXZTLAkZokjjhw+H2B8z6rhjQq4gj63/C3Xo/8rtAft91jVfL+rqiFDCk75/kShCKm7uaU3xXThSKKorxTHPMaCdwd939MaUQSR5xxCHiJcz+WiNwd1foUFUqfcf+lKuR+pehi83kM0bpar7bBd1WhzNXS/83IXdL7+vwXWvwUR2aSOOK4c7m/I6vCjj5/BzXNKJV+CCeIp9QRZ00Fix8r2nS/rSpB4JW6CcgQVn2KatesHiPSDRkicH8ngSOJI06KKQzDfzND5KLwpndbdQiyD6orSDupKHfyhdNz5dacohjyu8KeppUETUL2R2qnqs20eWcqr48kjvCAOaT3/maGyC2rPCawH9L+UxmNW8ZNjXpWan9TI+vPitrB72gFulbs/6WWNmwiQsyaIXDfASRwJHHEKQ3GUYWeSSMHN7513yhNWY78oEvybxTdhPBPJSc+M6j8panF6ooOvyojnRbiWiOB+1ZV5CCJI1TgEgosvjXSsaJq35fUeqFH1fVQf1Uj649KrpSfwB0CWmz6V1URo0ft3QYXUNDXxq0MExhl3iu9oI0kjlBAIX7BfZ49JtbjfsHFRRpLRl5XdivsW0gcU3JX7ZIKOdfVXGB1SdXtv1FMuO40XkH1AJIPOhsE7hel02uSOEINltxfTBC5tLsHTXpU0ri/KKKf40hOTishR/dUyHlPyZpLj6r+FUm7rTAalEF77hm4wWDcfY1IscYRliSOaAcWkVr91ACRW0TRVI2BextntvSE7adKbDyOU58xFRXtxpW00ieKpnTvVEaCNRCfRQP7Ik9xAGabl2mRxBHtDdE/oWRHQbkWBZyA+kIhHd2G3Gk1Nv5JhaxpJedTf1NhzQIOihTUULjv3DWFsesLQH8EfoLDJNdI4EjiCB/d75oJIhdpoW82+1jRtVbXlMj6XkFbLkBKHe1zS037fKHsirgIYxXqE1Oe0hLF3i0SOJI4wueQ8sj9L/dQOZEbcH9WVQM/tnfB9UM1wfqvsLF8OZ+7cwoG7zcq4sKf1cSER+pudk0jWv0ZLUE3gduCDiRwJHGEiID90P2A7phXr4M2Dd66m05LGVINJypvKbggalVFseqHbkFNy3yrLlb9CfZNqyZwm9BhkwSOJI6QRYK+R7fUTOQWcD5tRVkw/FrNRdc/uFHxMl5E2RnpMn7mZsTLOIpYoIXCfa2MSqyiJ60oJ3B/QVGUPEdNkjhCHpF7gDNe86o1+B7DeF5VSHznrqqQdMa9Fi9jCdaMiT+bWhIvo5YocFXVKe+ot7+G//XSnzQs/rOyCEuQxAWGPLrod4qu527EBq58mVZ2vnZDhaSvxLeLtIJDA/JvwJhXcmPuVcipiU6MgnLeUB1Zf0QM6OcoSRJHyCdyd3HznV4iNwIat67K3t+qqHIe2VX6use3wgeZkvvcyb8vd8RpuE3iW1UU7jrkHVEbU+fQKl4olp8giQsOI+iyeolc3t2B9HlF8r5VYesX4snxHeF2nBJfDGMOUzgdpEJT/36DE7RajwHMwtbPSeBI4giNRO450oZn3bBKPEJ+3JIaaWdRb0m+tHOwqWwJ7wCyW6Vs+aZU9PgltEM9cWkN0j5SGkWnMAbs4F+OhiRxhNpZ2JegFz/hTN0udvb+7H+1U/X9auzU/fyo2Gl48v5XO3Wf2jn0STuQ/WckEh/0+zstnvXx+43a7tTpWP3Enbqva3+/ua32v/uuIuu+tDs1uu/UybvToFOj9AdLtFP3v506CWvfuv/kPyAPSbL/X0O+z+osJcn/7yDhTkvNd7z7/x36zEH+l9D/v4SUR+v//v3/GrHzqyP2fwn+r5blXSXuk8CRxBHqcQGXwzxT2pmvIORrkbwfdu4TLmMK9syJ3rj6UrT9vhNtvRzKt+aEt8A+5Jb1KenRw2iNmyrj5jDo2ysSOJI4wg7OIyH7qfgA3wwTkPyyGit/Id7Gq8ILFH8DoimXAn8r2nY3xfeUHHrzeaelht3nbkhhxBxCpNdjZYIkjjgGxXiDI/L6iFwOUr9RIvd58ZKmcAhD8tD0RLB0Q5BOcj/5o/C2l0PvOK8k5ryAr1NOH4F7osbGBEkccSKS8Uccls8pvM3hKyWhaUH8ULog+oTlhuALoxZEVwS8LryHRCRzRU0fXnD6JruPcaxlRSH1JEjiiGPhHNLbt9URuW41Ui9DUtly/sENCm6d22Jluyv4JoRx4Tdy5CDfsoLem0L7e+161RG4beTvLbskxzeSOCIEdKO7v3LX1BG5dYRXHTTumej58CAuaIuJTXx/5uReKz8o+D6OGdHU6JUKCjcIOdeVUaGIdn6B4skkcCRxRGBE7hKyo7bwryapZ5CrsqSCxj0VHVTvix3yU8jpkWq1t2Kp+Yx7KZpmPFVxp8kc2t6gqniYhF1fksCRxBHhErkt5JotqSJy3SAgTxRIvAk5Ja84PBcb+J8L9W4RVCQm1mZF0VOGywriyj3I2a2MwEVTWhI4kjgicCK3icKQSy6rSOYlSDylgMZdFSzdXbcoVLIbblqkXGNirz+fE93SriqotTaNPNFZVQRuCYcvLpPAETQBsUvkrqI45KIqiXdQ8Swp/ibQDcEWfCXUfovwrEy5Lgr15GeCp2CrODUrnRCtwoJFNbEviZb4GpEly5GLIIkjqoeCDaSUTyoKZSuQNytcxgdCB/4IK0JlGxF6PnVb6CXiq0jFl9rGLqIHyJ5qFRFFVtSsaCVh0ZdoiSRwBEkc0ZTIrSPfTA+Rm4S0C8KD7n2xEiZhPYmDQVZo7tl91yOyzz4XO6RfRAtLCr+S8IVQat483r1wt9wARyqCJI44aAi9hqKRE2qkvQlkRRPjx2Jp3LxbEynXjsChPwmpJNpqTWztuqiodJaxw53W9YOPIW2JIxRBEkccjhJSuB+pIXLzwmXNQr55oWtxn4kcFu4KXPMqiTzWELWtpNhemRV+Rfw5NfH4EVofCRxBEkccK3A8BMaVrMc9wGmthGD5HgqlmTMi888uC6xiNyOyPuF1oT10HC0+K/ps50MlpKgEH2+7fo5IBEkccZJQfB/0qF9Fwu8qZJU7bHRBunGhmV79AgnTosCyNtMC++cDsXGjS2xf7IF0i4KnfB/RD/pGAkeQxBHu06pj3UOWXL8KSR8LrvUUDR15kQPFlkCZboqTSWIfuIc2L69FFbD5V3By73y5p2J/oR8t7h4JHEESR5wGRpGltFXB5t6/0f82q76zufedfWxVfa76081+e7Pus41Pr/5f9b+bVW+O/r6Lc403Gj7Z7HcOkqpRr9qnbdX9TuPzm7/pLrZw6p/W7DeavWOzpRU26yyx1cQuW3WfqrXN0wZr1D598wgeOl3/34ClTuL/Rm+cnv+ffrL/t+qe+6n+37XSp/t/85T9/xD1Ef30/8P9f2MvQvjo/8fx/w1Ei1GOPARJHHGaRO42MIoLymXjfKXsiEzZpjCEyLPgKKQaFCaTtJYWtX5pfnsgzmuRnZ6glUuNDA9w3EJ+/HoATHLEIUjiiLMgcrdwX1+XcCkLkPK8YAvKs9+GOHtddmUn665ZaXdvnBd40KILrVvm+lEC9O0WKJLsyNUFn97HmdkExxqCJI44K5xDvtKScCKXgYS3hMo4Aft1ibPXXWEDx7yw07wzwspRRHQpI46C3BR6BrsLG5SrwqlRFw5b3EM7I4EjSOKIMx/yZ3DsfVE4kRtHZo7Ush43xNluVlhRjxFhV4KtCKuTvyju/G4XWvWMkzltuiG85mUClrtDAkeQxBHtJHILlQulukTLuA0JM05mdbaEsGHktihfdgmrX3fV5YRZJyOs/WwLLMESybUM32UER6lEZUo8TQJHkMQRPojcTaQxSw6R0zioXxQp14awsD2NbEdJ8twUZZ+7TtaFVtPCiMgG4kBM4OX218Rmx+7aLYpPUyRwBEkc4Y/IzSPfRDKRK1bkkyfXebcuKngnsOkkie6uC1r7KkIaSX1OWmW/daE9bEvkBG6/v02hx82LngITJHFEIERuDlsWg8LlS4uTaw6QJM8Qtp4kWWdQkGUWReXnDbIdH9rn1wTfyhARuOuwGgkcQRJHCCJKG8LKQsRqSntcE1j8YM5dcLIKe/QIOtowIyiHccSx2EmsxZEYebekjGDSNuKkErgJrBBeEpVjSZDEEUSFyM1iY2VArHTroExpYQH9sqhzcz0oxBATc+2QnBy9S4LIrayp0oS40h0JZAyuClx336fg66JaE0ESRxA16MYmxppYIjcO2bLChpxVUTc5LorxXULQitNVMUSlLGpjd1wchSugh0s96VmubPEWOEoQJHFETPiNCRexwiSTyPVBsjFhNO6KIIkKgo5bbAhZT0kIOtZwRdAa0xj6kqwVryl4qiA0Ji4iKpLAESRxhBIMYI6+KpLIpbHpK2u7JQ155OTrXRAjy4LrFTIAL4ihTXLyBMfE9aIFIC2SwEWSkcARJHGEMpRwjm7e5Z3EYw5XIJ2kAWhFjDwp2KbTyci3GhSSxzQpppWknJTcrhVRhKkk7szuLvKgbzJjIEESRxDuaOnp68gF2f1Tj7W6/601/dnuV0f5/Y+fa/7pxqes1b177RBpW/18rcXfB2GtTvLW+q4d8rS1pk9olHStiUUaLVhvi+YWbv7U2k+tNX0S/U//h+L/ZURAjgIESRyhGn24jn5S3EZHJ9KylwRJlcL2VF6IZWSs+HQJ2caUcblcCq01JWR1Sc6KYCTNJWztdgqLLnkkbSyRwBEkcYQdIncR22MpcVItumEn50bMRSH3lw6LuKyoE4nzEqwho+zKJEoOs5XGGnJv5RXsSCGvdBne6mTcJ0jiCFtEbkEckUuBrpwXI1MOQ1JGBH26KKIY6UUBdKFLRDHbFGwho79cEkPhZPXdfZkmYCESOIIkjjCJFJKP57GNmRJWgFPKOcgY5FgQYZ1ed85JqEPWK+Bs4ZQAS5wT0UJTgnpKQdx2ZQrtdRHRhASOIIkjDCOJopcXkcWSEiXTHLYQO4XQuDkRtplG4eaY92MxwwK2lssi2oQEkjIv5EL5TnhF1s2jnWglc/gTZ4QnSOKIEIjcKOasQ4KIXDQszAqRpwxJks7/3RuzAlZbxgWQ2ayA+0mLAvrsrJC6j12gS0OC6FJnpceSwBEkcURgRG4ECcADAuhK7MPNoeeFDFMDsExSQP37Pu9txP8BiznvJ5iLAurUJSt9NSYis3ZO0FGGOKwii1ISJHEE0cahIToHWRIkzzQSk5MiipdOeR8Yshi4497XoOKeV1lmvdOEc95bZBytsSSif04I6Z+7VimhdQwLmoYSJHEE4YXIzQi6lKZfiDT9WH/xTaGGvKeOj3vezMx639Dt915aJKJwEo4QRJOKXjEErh/SDJHAESRxBBERuSGsgRXEXII1LWLraMh7Wn/S+3rggOdssF7PLSGJdbiE51YwIqBCXbRtOS2muEkR+wdjgqrlESRxBCFiRW4S4bGwh3zlT/7D17XIN/1Ofu/vo/zOQV/1YTVusu4nrWVpfEqtFPmGv4/6nCnYpHBE5A/4ulqW/DGeUcABlPKRJTj4efkT/G4ebx/14P+PGP7gAR/+j94/7tX/BZTMmPLo/489YaoqNrTP/439vwhJRkngCJI4gog1OXc2gvn2FGbd1ShXsPu//b/LH74aqPlfc5Rrfndg73nlD/8ONDwx+n80cJQ/fO+gt5WrJB04giwDTd5eL9nupyYr1mgmQ7lG4vo3lxs0b5S83EKy2u9NwyfNrdhcnnJTjep90Ur2ehkG93zgw/+72g959P8IMsAGvPp/GitOAx79vyvDlDf/1/b/cUzuRkjgCJI4gmiNDELlmIj7AhIYQkueN7PimPX3et46GvKq/6TnAiNxr5vJBc+byaOet9PjWIsc9b6hvBuXolXZDCM0QRJHELFDr58aA9Iisl9GPafWx2GJouf3+xy6xjwO4Smsu8Q8vn3Mc9sf80zhMpCgT0AUyGAiM0QCR5DEEcRxiNwItjDSAgL4iOf1kIRnCbqxqelzNarb4/b+gNe7Irq9Vk0c8bwC1gsJJPT/sgg5CIIkjlCHbgxkJe+bKZ1YDRj2KkV0n0TO6x0SaY/rQT0eb4woeG37Pimc32voEpg4lFyH831OveyZShMESRyhHFmE817v95rmsJ2S80rjhjxu66Y95sVlPW6o9XvcQvO5fdeNt/vscXm8v9s7gRvwPHUiCJI4wlk5tTqIFZlO7zck+pQhonFdHulM1pvegx63chPeWnyv1w1Ef+28A6R9wHtfj47z5L2vBBIESRzh7OTIDWCTp9OzDGWkm8e8VdLzRypSoFK+hjRfb47D275IhD8ak/R6n3EKNs97JnA9aHE5EjiCJI4gTju8diNPpoBVCn8oVgK8r7fnMcBmPb2735vlS54snsOb/WgclZv21cYiEuWvfZc99+9Igm4SOIIkjiDOisjlKmU3i5UK6s2Ra/Gd3AG/c/gzPqLnw/tzLT93nHc1/kaz/+fq3n1S6Y8uXf2nSnj72byp+tO5qr930Q9Kc5xnnZb/+/bee9CnzsL/Rfi4lf8/vfUe9PPmbz77lrb/7p6m/j/us07m/55KXMmSwBEkcQRx1ttc+UqOVqfHHD1/Ke8ZUItOT0cMcp6s3e1p87zLU1p/1tsp7LS3HtXnMeOzo3J8hgSOIIkjiLYRuRzm7l3eipHG8fZuT2/PeDpg0eGJPiY9ZUkVvGQgRi0r7um9XZ4oVM7j+fOOCoHkFipBEkcQbR92urEJkvK4HufroEX05rgX+pjzMswWPVWo6/Cy3pny0pd6PK0tJypZcB3eCFwRFo8zmhIkcQThh8hlMQikvJ2lK3ga+jJeCiB0QN9OLxuMcQ+biwVPlCbmxa8ZT9XYejyduO6Axj2YlJDAESRxBOGZyEUnCZPeVgP9bKumvWwBpbzka2U9DPQJL5rmPbTjaDsz7a3vdHgqpJLHuxOMngRJHEFIIXLdCM0+kAXCeW804Ldf0/a/M4MW1e53piskLox2lEJLynrqsdGRlU5GTYIkjiBiosqPZEDkogH/pEid+NPZhvemTvDM1DHlzTTVNvUJFjjKO7ub6pY6VKfUEW2QavhO5pO8ejL7d+Otn+Ktk/i/+9S1OMo7Myd+w8n937qfNvP/6Xk4W9GXBI4giSMIkUggRPsI0h0VquFjezPlIR8v6SEBPdb2wyMdbW+7KQ/tJ+3lOEHKQ1+JV2gcc+AIkjiCEL4iF83e415WAhNtHxDTHt7Zfrrq443t92T7aWP739npZZIVr2zgksARJHEEoYTIpRC2Ozysx7X7rdE7O9ueFt7Z9hWjjrYP+u1usUkPfaTdbTXpoVfuEjhuoRIkcQThdB12SAAdbUY0GMfb/E4fb2z3+zrb+r5421tOsu3ttN0axtvuxV0/JrkCR5DEEYRORIPV6SNxCp+IEN/7c7zfjx/h8/FDPv/pFkhUvTnRBiufzTvOyv+dx/R/4hP933lM/ydOTYej+j/hwcqRliRwBEkcQaincvG2bxzF277u2O4NR8v2tG3NuPnWuasjr9IiSOIIgjgx8Wg3cYyZfp9d3TqM9wPGAoIgiSMIgiAIgiBI4giCIAiCIEjiCIIgCIIgCJI4giAIgiAIgiSOIAiCIAiCJI4gCIIgCIIgiSMIgiAIgiBI4giCIAiCIEjiCIIgCIIgCJI4giAIgiAI4pRI3P8HLDWPgfmcvi0AAAAASUVORK5CYII=");
}

/* ---------------- grade do fundo ---------------- */
/* Grade em perspectiva atras do texto, com uma barra roxa varrendo por dentro a cada 6s.
   **A arte e regerada, nao ligada nos arquivos da referencia**: o nome deles tem hash de
   build, e no dia em que publicassem de novo o fundo daqui sumiria calado.
   Um arquivo so serve para desenho e mascara porque a arte e linha branca pura variando
   no alfa: guardei apenas o canal alfa. */
.how-hero-grade{position:absolute;left:0;right:0;top:44px;height:202px;z-index:0;pointer-events:none;overflow:hidden}
.how-hero-grade > span{position:absolute;inset:0;display:block;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* O BRANCO MORA NO `::before` DE PROPOSITO (30/09/2026). Ele era `background:#fff` no
   proprio elemento, mascarado para virar as linhas da grade. O axe nao entende mascara:
   ele le a cor de fundo, ve um retangulo branco opaco entre o texto do heroi e o fundo
   escuro, e reprovava o `h1` com contraste de 1,04 e o subtitulo com 2,29. Na tela e
   branco sobre #0a0a0a.
   Fundo de pseudo-elemento o axe nao conta, e o desenho fica IGUAL: comparei a captura
   do elemento antes e depois e os pixels batem byte a byte.
   `position:absolute;inset:0` vem da regra `.how-hero-grade > span` acima. */
.how-hero-grade-arte::before{content:"";position:absolute;inset:0;background:#fff;
  -webkit-mask-image:var(--how-grade-arte-1);mask-image:var(--how-grade-arte-1);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.how-hero-grade-varre{overflow:hidden;
  -webkit-mask-image:var(--how-grade-arte-2);mask-image:var(--how-grade-arte-2)}
.how-hero-grade-varre i{position:absolute;left:0;right:0;height:200px;
  background:linear-gradient(to bottom,rgb(var(--how-roxo) / .5),rgb(var(--how-roxo)));
  animation:how-hero-varre 6s cubic-bezier(.35,.35,.3,.7) infinite}
/* as keyframes sao as mesmas de la: entra por cima, desce em 2s e espera 4s embaixo */
@keyframes how-hero-varre{0%{transform:translateY(-202px)}33%,100%{transform:translateY(202px)}}
/* O SELETOR PRECISA DO PAI, e nao e enfeite: a regra base e
   `.how-hero-grade > span{display:block}`, que vale (0,1,1), e `.how-hero-grade-varre`
   sozinho vale (0,1,0) e PERDE. Media query nao soma peso. */
@media(prefers-reduced-motion:reduce){.how-hero-grade > .how-hero-grade-varre{display:none}}

/* =====================================================================
   A VARREDURA CUSTAVA 180 RECALCULOS DE ESTILO POR SEGUNDO
   Ela anima `transform`, que normalmente vai para a GPU, mas **o pai tem `mask-image`, e
   mascara tira o elemento do caminho composto**: cada quadro volta para a linha principal,
   com recalculo e pintura.
   **NAO HA TRUQUE DE CSS PARA ISSO.** Medidos, todos seguiram em 180/s:
   `will-change:transform` no filho, no filho e no pai, `contain:paint`,
   `content-visibility:auto`. Rolar para fora da tela tambem nao ajuda. So parar resolve.
   Por isso ela **nao existe no celular** (a arte da grade continua parada no lugar) e no
   computador **para quando o heroi sai da tela**. Desfazer e uma linha.
   ===================================================================== */
@media(max-width:1100px){.how-hero-grade > .how-hero-grade-varre{display:none}}
/* A classe e posta pelo `home-hero.js` quando o heroi sai de vista. */
.how-hero-grade.is-parada .how-hero-grade-varre > i{animation-play-state:paused}

/* ======================= categorias da home ======================== */
.how-hc{padding-top:24px}
/* Titulo no meio entre dois filetes, botao na ponta. */
.how-hc-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
.how-hc-topo h2{margin:0;font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.how-hc-filete{flex:1;min-width:24px;height:1px;background:linear-gradient(to right,transparent,rgb(var(--muted-foreground) / .3))}
.how-hc-filete-dir{background:linear-gradient(to left,transparent,rgb(var(--muted-foreground) / .3))}
.how-hc-rodape{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
/* No computador os filetes do rodape somem: ver o comentario do markup. Os da fileira de
   produto usam a mesma classe e moram no `<style>` do `pages/index.html`. */
.how-hc-rodape .how-hc-filete{display:none}
@media(max-width:767px){
  /* A FAIXA DO TRUSTPILOT SAI NO CELULAR (30/09/2026), a pedido dele. Na tela estreita ela
     quebra em duas linhas, empurra o titulo para baixo e come ~73px da primeira tela (55 de
     altura mais 18 de margem) antes de a pessoa ler o que a loja vende.
     A prova social continua: o link do Trustpilot esta na faixa da comunidade e no rodape.
     **Fica por CSS e nao por `<template>`** como a vitrine do heroi: aqui sao ~20 nos estaticos
     e NENHUM pedido de rede, contra os 231 nos e 15 imagens de la. Montar por JS um elemento
     que fica acima da dobra traria risco de salto de layout para economizar quase nada. */
  .how-hero-tp{display:none}

  .how-hc-rodape .how-hc-filete{display:block;flex:1;min-width:14px;height:1px;
    background:linear-gradient(to right,transparent,rgb(var(--muted-foreground) / .3))}
  .how-hc-rodape .how-hc-filete-dir{background:linear-gradient(to left,transparent,rgb(var(--muted-foreground) / .3))}
}

/* ---- trilho que rola ----
   Parado, a fileira e identica a grade de antes: o cartao guarda a mesma largura. Muda so
   o que ha alem da borda.
   **Arrastar e SO para mouse** (`pointerType !== mouse` sai fora): no toque o navegador
   rola melhor sozinho. E um `click` na fase de CAPTURA cancela o evento quando o ponteiro
   andou mais de 6px, senao soltar o arrasto sobre um cartao abre a categoria.
   `padding-top` com `margin-top` negativo porque `overflow-x` corta o pulo do hover e o
   contorno de foco. */
.how-hc-trilho{position:relative}
.how-hc-grade{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
  padding-top:6px;margin-top:-6px;cursor:grab}
.how-hc-grade::-webkit-scrollbar{display:none}
.how-hc-grade.is-arrastando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.how-hc-card{flex:0 0 calc((100% - 5 * 14px) / 6);scroll-snap-align:start}

/* `[hidden]` sozinho nao vence o `display:grid` do proprio botao: a regra com o
   atributo precisa existir, senao a seta continua aparecendo na ponta. */
.how-hc-seta{position:absolute;top:50%;z-index:3;display:grid;place-items:center;
  width:38px;height:38px;margin-top:-19px;padding:0;border:1px solid #2e2e33;
  border-radius:50%;background:rgb(36 36 40 / .94);color:#c4c4cc;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease}
.how-hc-seta[hidden]{display:none}
.how-hc-seta svg{width:20px;height:20px}
.how-hc-seta-esq{left:-14px}
.how-hc-seta-dir{right:-14px}
.how-hc-seta:hover{border-color:#45454d;background:rgb(36 36 40 / .99)}
.how-hc-seta:focus-visible{outline:2px solid rgb(var(--how-violeta));outline-offset:3px}
html[data-how-theme=light] .how-hc-seta{border-color:#dcdce0;background:#f0f0f2;color:#4a4a52}
html[data-how-theme=light] .how-hc-seta:hover{border-color:#c4c4c8;background:#e6e6ea}

/* 187/250 e a proporcao que os cartoes ja tinham, e e a mesma das artes enviadas
   no painel (190x255): assim a imagem nao e cortada nem esticada de lado */
.how-hc-card{position:relative;display:block;aspect-ratio:187/250;overflow:hidden;border:1px solid rgb(var(--foreground) / .08);border-radius:16px;background:rgb(var(--how-grafite));transition:border-color .25s ease,transform .4s cubic-bezier(.34,1.5,.64,1)}
.how-hc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* o degrade e o que mantem o nome legivel sobre arte clara, como a do Minecraft */
.how-hc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0 / .82) 0%,rgb(0 0 0 / .45) 34%,rgb(0 0 0 / .08) 62%,transparent 100%)}
/* A CAIXA DO NOME TEM DUAS LINHAS SEMPRE (30/09/2026). Ele e absoluto e ancorado pelo
   `bottom`, entao nao empurra nada; o que o CLS contava era ELE PROPRIO mudando de
   tamanho. Medido numa carga fria afunilada: "ASSINATURAS PREMIUM" ia de 31px para 16
   quando a Inter chegava (na fonte de reserva ele quebra em duas linhas, na Inter cabe
   em uma), e isso sozinho era 0,0052 de 0,0069 do CLS da home.
   `align-items:flex-end` mantem a ultima linha na mesma altura de sempre, entao a caixa
   fica parada e o desenho nao muda: a primeira linha e que aparece acima, quando ha. */
.how-hc-nome{position:absolute;left:10px;right:10px;bottom:14px;z-index:1;display:flex;align-items:flex-end;justify-content:center;min-height:2.48em;color:#fff;font-size:14px;font-weight:700;line-height:1.24;text-align:center;text-wrap:balance}
.how-hc-card:hover{border-color:rgb(var(--how-violeta) / .55);transform:translateY(-3px)}
.how-hc-card:hover img{transform:scale(1.06)}
.how-hc-card:focus-visible{outline:2px solid rgb(var(--how-violeta));outline-offset:3px}

.how-hc-botao{display:inline-flex;align-items:center;gap:9px;flex:none;padding:12px 22px;border:1px solid rgb(var(--how-violeta) / .45);border-radius:12px;background:rgb(var(--how-noite) / .6);color:rgb(var(--foreground));font-size:14.5px;font-weight:600;text-decoration:none;transition:border-color .25s ease,background-color .25s ease,transform .4s cubic-bezier(.34,1.5,.64,1)}
.how-hc-botao:hover{border-color:rgb(var(--how-violeta));background:rgb(var(--how-grafite));transform:translateY(-2px)}
.how-hc-botao svg{width:16px;height:16px;transition:transform .32s cubic-bezier(.34,1.5,.64,1)}
.how-hc-botao:hover svg{transform:translateX(3px)}

/* TEMA CLARO DO BOTAO. `--how-noite` e `--how-grafite` sao cor de MARCA e sao escuras nos
   dois temas, entao o fundo saia cinza medio com texto escuro em cima: 3,29:1, abaixo do
   minimo. Era um botao na pagina; com o trilho virou um por fileira, dez no celular. */
html[data-how-theme=light] .how-hc-botao{background:rgb(var(--how-branco));border-color:rgb(var(--how-violeta) / .35)}
html[data-how-theme=light] .how-hc-botao:hover{background:#f1f1f3;border-color:rgb(var(--how-violeta))}

@media(max-width:1000px){.how-hc-card{flex-basis:calc((100% - 3 * 14px) / 4)}}
@media(max-width:720px){.how-hc-grade{gap:10px}.how-hc-card{flex-basis:calc((100% - 2 * 10px) / 3)}.how-hc-nome{font-size:12.5px;bottom:10px}}
@media(max-width:640px){.how-hc-topo{gap:12px}}
@media(max-width:480px){.how-hc-card{flex-basis:calc((100% - 10px) / 2)}.how-hc-seta{display:none}}
@media(prefers-reduced-motion:reduce){.how-hc-card,.how-hc-card img,.how-hc-botao,.how-hc-botao svg{transition:none}}

/* ============== fileiras: reserva de altura enquanto vazias ============ */
/* A fileira nasce vazia e o conteudo chega por busca, entao sem reserva o que esta abaixo
   e empurrado quando os quadros entram. O `min-h-[300px]` que havia no
   `components/category-loader` reservava 300px, e a altura real MEDIDA e:

     390px de tela -> 384    600 -> 391    768 -> 1278    900 -> 1383
     1024         -> 615    1280 -> 676   1440 -> 708

   Ou seja o pior caso era entre 768 e 1023, onde a grade fica com tres colunas e quatro
   linhas de quadros: 300 reservados contra ~1.300 reais.

   **Os valores abaixo sao o MENOR de cada faixa, de proposito.** Reservar MAIS do que a
   fileira vai ter cria vao morto e, ao soltar a reserva, um deslocamento para CIMA, que conta
   como salto do mesmo jeito. Reservando o minimo da faixa, o `is-cheia` nunca encurta nada.

   O resto do salto e coberto pelo `rootMargin: 300px` do observador em `scripts/main.js`: a
   fileira busca antes de entrar na tela, entao o que sobra de deslocamento acontece fora da
   area visivel.

   `is-cheia` e posto pelo `loadCategory` depois de injetar, e serve para a fileira que vem com
   menos de dez quadros nao ficar com espaco sobrando. */
.how-fl:not(.is-cheia){min-height:384px}
@media(min-width:768px){.how-fl:not(.is-cheia){min-height:1278px}}
@media(min-width:1024px){.how-fl:not(.is-cheia){min-height:615px}}

/* ================== fileiras: bolinhas de passada ================== */
` sairia nove vezes.

    No celular a fileira e um trilho de uma linha so, com o botao "Ver todos" embaixo
    entre dois filetes; no computador ele volta para a linha do nome. **O botao existe UMA
    vez no HTML** e quem troca a posicao e o `grid-template-areas`: duplicar poria dois
    links iguais na fileira e o leitor de tela anunciaria o escondido.

    `align-content:start` e obrigatorio: o componente tem `min-h-[300px]`, e sem isso as
    linhas da grade esticariam e a fileira daria um pulo quando os quadros entrassem.

    O quadro e `min(53%,186px)`: a porcentagem reproduz a beirada cortada do site atual,
    e o teto de 186 faz tela maior mostrar MAIS quadros em vez de quadros maiores.
    `animation:none` no quadro porque a cascata de entrada sobe 20px, e `overflow-x:auto`
    faz o navegador cortar o pe do cartao durante a animacao.

    **A largura de corte 767px tambem vive no `scripts/main.js` (`TRILHO_CELULAR`).**
    Mudou uma, mudar a outra.
  <% endcomment %>
  <style>
    /* ---- bolinhas de passada ----
     Uma por quadro, a do quadro atual vira pilula. `[hidden]{display:none}` e obrigatorio,
     senao o `display:flex` daqui ganha do atributo. Folha duplicada em
     `components/product-styles.html`, porque o core.css esta no teto. */
    .how-pontos{display:none}
    @media(max-width:767px){
      .how-pontos{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px}
      .how-pontos[hidden]{display:none}
      /* A BOLINHA CRESCE POR `transform`, NAO POR `width` (30/09/2026): `width` refaz layout
         em cada quadro, e isto dispara a cada arrasto do trilho, que e justamente quando a
         pessoa precisa de fluidez. A caixa tem sempre 18px e a bolinha parada ocupa 1/3 dela
         por `scaleX(.333)`; a ativa vai a `scaleX(1)`. O `transform-origin` central mantem o
         ponto no meio do espaco, como era. */
      .how-pontos > span{width:18px;height:6px;border-radius:99px;
        transform:scaleX(.333);transform-origin:center;
        background:rgb(var(--how-violeta) / .32);transition:transform .22s ease,background-color .22s ease}
      .how-pontos > span.is-ativo{transform:scaleX(1);background:rgb(var(--how-violeta))}
    }
    @media(prefers-reduced-motion:reduce){.how-pontos > span{transition:none}}

    .how-fl{display:grid;grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"nome mais" "lista lista" "pontos pontos";
      align-items:center;align-content:start;column-gap:18px}
    .how-fl .how-pontos{grid-area:pontos}
    .how-fl-nome{grid-area:nome;margin:0}
    .how-fl-mais{grid-area:mais;display:flex;align-items:center;gap:16px}
    .how-fl .package-list{grid-area:lista}
    .how-fl-filete{display:none}

    @media(max-width:767px){
      .how-fl{grid-template-columns:minmax(0,1fr);grid-template-areas:"nome" "lista" "pontos" "mais"}
      .how-home-products .package-list{display:flex;gap:14px;overflow-x:auto;
        overscroll-behavior-x:contain;scroll-snap-type:x proximity;
        scrollbar-width:none;-ms-overflow-style:none;
        margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;
        margin-top:12px;padding-block:4px}
      /* A barra de rolagem fica escondida: a beirada do quadro seguinte ja diz que anda, e uma
     barra atravessada embaixo de cada uma das nove fileiras seria ruido. */
      .how-home-products .package-list::-webkit-scrollbar{display:none}
      .how-home-products .package-list > .hc-card{flex:0 0 min(53%,186px);scroll-snap-align:start;
        animation:none}
      /* 14px, e nao os 20 de antes: agora sao as bolinhas que ficam logo acima do
         botao, e elas ja trazem o proprio respiro de 14 acima delas. */
      .how-fl-mais{justify-content:center;margin-top:14px;gap:14px}
      .how-fl-filete{display:block;flex:1;min-width:14px;height:1px;
        background:linear-gradient(to right,transparent,rgb(var(--muted-foreground) / .3))}
      .how-fl-filete-dir{background:linear-gradient(to left,transparent,rgb(var(--muted-foreground) / .3))}
    }
  

/* ==================== faixa da comunidade ========================== */
      /* Tokens locais: os `--pa-*` do painel da conta nao sao carregados na home. */
      .how-com{--cm-fundo:#161619;--cm-linha:#242428;--cm-campo:#1c1c20;--cm-borda:#2d2d34}
      html[data-how-theme=light] .how-com{--cm-fundo:#ffffff;--cm-linha:#e4e4e7;--cm-campo:#f7f7f8;--cm-borda:#d6d6d6}
      .how-com{display:grid;grid-template-columns:minmax(0,1fr) 34%;align-items:stretch;border:1px solid var(--cm-linha);border-radius:22px;background:var(--cm-fundo);overflow:hidden}
      .how-com-texto{display:flex;flex-direction:column;gap:12px;padding:30px 34px;justify-content:center}
      .how-com-texto h2{margin:0;font-size:clamp(20px,2.2vw,25px);line-height:1.2;font-weight:800;letter-spacing:-.02em}
      .how-com-texto p{margin:0;max-width:390px;font-size:14px;line-height:21px;color:rgb(var(--muted-foreground))}
      .how-com-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
      .how-com-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:1px solid var(--cm-borda);border-radius:11px;background:var(--cm-campo);color:rgb(var(--foreground));font-size:13.5px;font-weight:600;text-decoration:none}
      .how-com-btn.is-pri{border-color:transparent;background:#645cfa;color:#fff}
      /* A arte fica colada nas bordas do cartao, sem respiro proprio: e o painel roxo da
         maquete, nao uma imagem dentro de um cartao. */
      .how-com-arte{position:relative;display:grid;place-items:end center;min-height:180px;background:#33299e;overflow:hidden}
      .how-com-arco{position:absolute;left:-28%;top:-46%;width:150%;height:auto;opacity:.5}
      .how-com-mascote{position:relative;width:186px;height:auto;margin-bottom:-6px}
      @media(max-width:820px){
        .how-com{grid-template-columns:minmax(0,1fr)}
        .how-com-texto{padding:24px 22px}
        /* No celular a arte vai para baixo do texto e encolhe: em coluna unica ela roubaria
           meia tela de rolagem sem dizer nada de novo. */
        .how-com-arte{order:2;min-height:0;padding-top:14px}
        .how-com-mascote{width:142px}
        .how-com-btn{flex:1 1 100%}
      }