/* CSS COMUM A TODA PAGINA: a marca e o cabecalho.

   Isto vivia em `<style>` dentro de `components/brand-mark.html` e
   `components/navbar.html`, ou seja viajava DENTRO DO HTML de toda pagina, sem cache,
   em toda visita. Medido: 43 KB por pagina, e no /login a marca saia duas vezes
   (o cabecalho renderiza ela, e a propria pagina tambem).

   **Arquivo .css NOVO em /styles E SERVIDO pela plataforma** (testado em 29/09/2026
   com uma sonda: respondeu 200 com o conteudo exato). O que nao sobe e componente
   novo, nao arquivo de estilo. Era por isso que este CSS estava inline, e a premissa
   estava errada.

   **A ORDEM AQUI E A ORDEM QUE ERA NO HTML:** a marca primeiro (ela e renderizada na
   linha 2 do navbar) e o cabecalho depois (o `<style>` dele ficava no fim do arquivo).
   Inverter muda quem ganha nos empates de peso.

   Ele e carregado no `<head>` do layout, DEPOIS do centralcart.css, que e a mesma
   posicao relativa de antes (os `<style>` ficavam no body, ou seja depois das folhas
   do head).

   Diferente do `core.css`, este arquivo NAO passa pela compiladora do CentralCart:
   nao aceita `@apply` nem diretiva de Tailwind, e em troca aceita `rgb(a b c / d)`,
   que no core.css e descartado calado. */

/* ============================ marca ============================ */
/* O fantasma continua sendo o `theme.logo` do painel; aqui entra SO a palavra.
   **Ela e base64 e nao arquivo porque o editor nao sobe binario** (PNG de 1x1 em /images,
   /styles e /scripts deu 404).
   Sao DUAS artes, uma por tema, e nao da para derivar uma da outra: na versao escura os
   olhos do fantasma sao vazados e na clara sao pintados. Guardadas em cinza+alfa, nao
   RGBA, porque as duas sao acromaticas. */
.how-brand{gap:9px}
.how-brand-name{display:block;flex:none;width:84px;height:26px;background:url(data:image/png;base64,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) left center/contain no-repeat}
html[data-how-theme=light] .how-brand-name{background-image:url(data:image/png;base64,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)}
/* no celular a busca e absoluta e comeca em x=154; com a palavra grande a marca
   chegava a 158 e as duas se encostavam */
@media(max-width:640px){.how-brand{gap:8px}.how-brand-name{width:65px;height:20px}}

/* =========================== cabecalho ========================= */
.how-header .how-action-panel{width:min(576px,calc(100vw - 48px));background:#0e0e0e;border:1px solid #1e1e1e;border-radius:14px}
.how-header .how-action-heading{padding:12px 16px;border-bottom:1px solid #1e1e1e;color:#b8b8b8;font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}
.how-header #how-action-results{display:flex;flex-direction:column;gap:4px;padding:12px;max-height:min(290px,calc(100dvh - 180px));overflow-y:auto;scrollbar-width:thin;scrollbar-color:#645cfa transparent}
.how-header #how-action-results::-webkit-scrollbar{width:6px}
.how-header #how-action-results::-webkit-scrollbar-track{background:transparent}
.how-header #how-action-results::-webkit-scrollbar-thumb{background:#645cfa;border-radius:999px}
.how-header #how-action-results[data-more=true]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),#0000);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),#0000)}
.how-header #how-action-results:empty{display:none}
.how-header .how-result-row{flex-shrink:0;gap:12px;min-height:78px;padding:10px;margin:0;border:1px solid transparent;border-radius:10px;color:#fff;transition:background-color .2s,border-color .2s}
.how-header .how-result-row:hover,.how-header .how-result-row[aria-selected=true]{background:transparent;border-color:transparent}
.how-result-media{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;overflow:hidden;border:1px solid #1e1e1e;border-radius:8px;background:#0a0a0a;color:#b8b8b8}
.how-result-media img{width:100%;height:100%;object-fit:cover}
.how-result-media svg{width:20px;height:20px}
.how-header .how-result-row .how-action-copy{gap:2px;justify-content:center}
.how-header .how-result-row .how-action-label{color:#fff;font-size:15.2px;font-weight:500;line-height:1.25}
.how-header .how-result-row .how-action-description{display:flex;align-items:center;gap:6px;color:#b8b8b8;font-size:12px}
.how-result-row .how-action-description svg{width:12px;height:12px;flex-shrink:0}
.how-result-category{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.how-result-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex-shrink:0;min-width:80px}
.how-result-price{color:#34d399;font-size:15.2px;font-weight:700;white-space:nowrap;transition:color .2s}
.how-result-row:hover .how-result-price{color:#34d399}
/* Preco antigo riscado da linha de resultado. E `<s>` no JS, nao um `text-decoration` solto, para
   o leitor de tela anunciar que o valor esta riscado sem precisar de rotulo. */
.how-result-antes{color:#7f7f7f;font-size:11.2px;line-height:1.2;white-space:nowrap;
  text-decoration-thickness:1px}
.how-header .how-action-status{padding:16px;color:#b8b8b8;font-size:13px}
/* Heading — search icon + label on the left, count in a pill on the right */
.how-header .how-action-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding-block:10px}
.how-heading-label{display:inline-flex;align-items:center;gap:8px}
.how-heading-label svg{width:14px;height:14px;flex-shrink:0;color:#7f7f7f}
.how-header .how-action-count{display:inline-flex;align-items:center;flex-shrink:0;padding:3px 9px;border:1px solid #282828;border-radius:999px;background:#ffffff08;color:#b8b8b8;font-size:11.5px;font-weight:500;line-height:16px;text-transform:none;letter-spacing:0}
.how-action-count .how-num{color:#fff;font-weight:600}
.how-count-of{margin-left:4px}
/* Result count — serafimcloud/animated-blur-number (only changed digits slide + blur) */
.how-num{--how-num-spring:linear(0,.028 2.5%,.0995 5%,.198 7.5%,.3106 10%,.4272 12.5%,.5405 15%,.6454 17.5%,.7387 20%,.819 22.5%,.8856 25%,.9391 27.5%,.9803 30%,1.0107 32.5%,1.0317 35%,1.045 37.5%,1.052 40%,1.0543 42.5%,1.053 45%,1.0493 47.5%,1.044 50%,1.0379 52.5%,1.0316 55%,1.0254 57.5%,1.0197 60%,1.0146 62.5%,1.0102 65%,1.0065 67.5%,1.0035 70%,1.0012 72.5%,.9995 75%,.9984 77.5%,.9976 80%,.9972 82.5%,.9971 85%,.9971 87.5%,.9973 90%,.9976 92.5%,.9979 95%,.9983 97.5%,1);display:inline-flex;align-items:baseline;white-space:nowrap;font-variant-numeric:tabular-nums}
.how-num-slot{position:relative;display:inline-block}
.how-num-layer{display:inline-block}
.how-num-in{animation:how-num-slide-in .45s var(--how-num-spring) both,how-num-resolve .45s cubic-bezier(.22,1,.36,1) both}
.how-num-out{position:absolute;inset:0;animation:how-num-slide-out .45s cubic-bezier(.4,0,1,1) both,how-num-dissolve .45s cubic-bezier(.4,0,1,1) both}
@keyframes how-num-slide-in{from{transform:translateY(calc(var(--how-num-dir,1) * .55em))}to{transform:translateY(0)}}
@keyframes how-num-slide-out{from{transform:translateY(0)}to{transform:translateY(calc(var(--how-num-dir,1) * -.55em))}}
@keyframes how-num-resolve{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes how-num-dissolve{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(6px)}}
/* Loading title — ibelick/text-shimmer */
.how-action-heading[data-loading=true] .how-heading-label,.how-action-heading:not([data-loading=true]) .how-heading-loading{display:none}
.how-heading-loading{--how-shimmer-spread:36px;display:inline-block;background-image:linear-gradient(90deg,#0000 calc(50% - var(--how-shimmer-spread)),#fff,#0000 calc(50% + var(--how-shimmer-spread))),linear-gradient(#747474,#747474);background-size:250% 100%,auto;background-repeat:no-repeat,padding-box;-webkit-background-clip:text;background-clip:text;color:transparent;animation:how-shimmer 1.4s linear infinite}
@keyframes how-shimmer{from{background-position:100% center}to{background-position:0% center}}
.how-header .how-action-status[data-quiet=true]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.how-num-in{animation:none}.how-num-out{display:none}.how-heading-loading{animation:none;color:#b8b8b8;background:none}}
/* Footer bar — rafa-porto/command-palette (bar + key hints) with hyperiux/link-button (underline wipe, arrow turn) */
.how-action-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:6px 12px 6px 16px;border-top:1px solid #1e1e1e;background:#ffffff05}
.how-action-all{display:flex;align-items:center;gap:8px;min-width:0;min-height:32px;padding:0;border:0;background:transparent;color:#fff;font:500 13px/20px 'Inter','Inter Reserva',sans-serif;text-align:left;cursor:pointer}
.how-action-all-label{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:1px}
.how-action-all-label::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.62,.05,.01,.99)}
.how-action-all:hover .how-action-all-label::after,.how-action-all:focus-visible .how-action-all-label::after{transform:scaleX(1);transform-origin:left}
.how-action-all svg{flex-shrink:0;width:15px;height:15px;color:#b8b8b8;transition:transform .5s cubic-bezier(.62,.05,.01,.99),color .3s}
.how-action-all:hover svg,.how-action-all:focus-visible svg{color:#fff;transform:rotate(-45deg)}
.how-action-all:focus-visible{outline:2px solid #9a94fd;outline-offset:4px;border-radius:4px}
.how-action-hints{display:flex;align-items:center;gap:6px;flex-shrink:0;color:#7f7f7f;font:500 12px/16px 'Inter','Inter Reserva',sans-serif}
.how-action-hints kbd{display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:6px;background:#ffffff12;color:#d5d5d5;font:500 11px/1 'Inter','Inter Reserva',sans-serif}
.how-action-sep{width:1px;height:12px;margin:0 4px;background:#ffffff26}
.how-action-bar[data-enter=true] .how-hint-open,.how-action-bar[data-enter=false] .how-hint-all{display:none}
@media (prefers-reduced-motion:reduce){.how-action-all-label::after,.how-action-all svg{transition:none}}
.how-action-search[data-has-query=true] .how-action-footer{display:none}
.how-header .how-action-footer{display:none}
.how-search-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #1e1e1e;color:#b8b8b8;font-size:12px;font-weight:500;line-height:18px}
.how-search-kbd{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:22px;padding:2px 6px;border:1px solid #1e1e1e;border-radius:6px;background:#0e0e0e;color:#b8b8b8;font:600 10.4px/15.6px 'Inter','Inter Reserva',sans-serif}
.how-search-popular{padding:16px 16px 14px}
.how-search-popular-title{display:flex;align-items:center;gap:6px;color:#b8b8b8;font-size:12px;font-weight:500;line-height:18px;text-transform:uppercase;letter-spacing:.3px}
.how-search-popular-title svg{width:14px;height:14px;flex-shrink:0;color:#7f7f7f}
/* Best sellers — first in-stock items of the sales-ordered search index */
.how-search-top{margin:0 16px;padding:12px 0 10px;border-top:1px solid #1e1e1e}
.how-search-top-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.how-top-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 8px 8px 2px;border-radius:10px;color:#fff;text-decoration:none;transition:background-color .2s}
.how-top-row:hover,.how-top-row:focus-visible{background:#171717;outline:none}
.how-top-row:focus-visible{box-shadow:inset 0 0 0 2px #9a94fd}
.how-top-rank{width:18px;flex-shrink:0;text-align:center;color:#7f7f7f;font-size:12px;font-weight:600}
.how-top-media{width:40px;height:40px;flex-shrink:0;overflow:hidden;border:1px solid #1e1e1e;border-radius:8px;background:#0a0a0a}
.how-top-media img{display:block;width:100%;height:100%;object-fit:cover}
.how-top-copy{display:flex;flex-direction:column;flex:1;min-width:0}
.how-top-name{font-size:13px;font-weight:500;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.how-top-category{color:#7f7f7f;font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.how-top-fim{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex-shrink:0}
.how-top-antes{color:#7f7f7f;font-size:10.5px;line-height:1.2;white-space:nowrap;
  text-decoration-thickness:1px}
.how-top-price{flex-shrink:0;color:#34d399;font-size:13px;font-weight:700;white-space:nowrap}
.how-search-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.how-search-chip{min-height:44px;padding:8px 12px;border:1px solid #1e1e1e;border-radius:9999px;background:#ffffff08;color:#fff;font:500 12px/18px 'Inter','Inter Reserva',sans-serif;cursor:pointer;transition:background-color .2s,border-color .2s}
.how-search-chip:hover{background:#171717;border-color:#2f2f2f}
.how-search-chip:focus-visible{outline:2px solid #9a94fd;outline-offset:2px}
@media (max-width:1100px){
.how-search-kbd,.how-action-hints{display:none}
.how-action-bar{padding:0 12px}
.how-action-all{flex:1;min-height:44px}
.how-header .how-action-panel{width:auto}
/* O painel do celular NAO tem teto de altura. Quem o prendia em 44% da tela era um
     `max-height:262px` na lista; o `core.css` ja da ao painel
     `max-height:calc(viewport - topo - 12)` com `flex-direction:column`.
     `flex:0 1 auto;min-height:0` e o que deixa a lista ENCOLHER dentro do flex; sem
     isso ela empurraria a barra de "Ver todos" para fora da tela. */
.how-header #how-action-results{padding:8px;max-height:none;flex:0 1 auto;min-height:0}
.how-header .how-result-row{min-height:64px;padding:8px;gap:10px}
.how-result-media{flex-basis:48px;width:48px;height:48px}
.how-header .how-result-row .how-action-label{font-size:13px;line-height:18px}
.how-header .how-result-row .how-action-description{font-size:11px}
.how-result-end{min-width:68px}
.how-result-price{font-size:13px}
.how-result-antes{font-size:10.5px}
}
html[data-how-theme=light] .how-header .how-action-heading{border-color:#e5e5e5}
html[data-how-theme=light] .how-header .how-action-count{border-color:#e5e5e5;background:#f4f4f4;color:#555555}
html[data-how-theme=light] .how-action-count .how-num{color:#191919}
html[data-how-theme=light] .how-heading-label svg{color:#747474}
html[data-how-theme=light] .how-heading-loading{background-image:linear-gradient(90deg,#0000 calc(50% - var(--how-shimmer-spread)),#000,#0000 calc(50% + var(--how-shimmer-spread))),linear-gradient(#a4a4a4,#a4a4a4)}
html[data-how-theme=light] .how-header .how-result-row .how-action-label{color:#191919}
html[data-how-theme=light] .how-header .how-result-row:is(:hover,[aria-selected=true]){background:transparent;border-color:transparent}
html[data-how-theme=light] .how-result-media{background:#f4f4f4;border-color:#e5e5e5}
html[data-how-theme=light] :is(.how-result-antes,.how-top-antes,.how-header .how-result-row .how-action-description){color:#555555}
html[data-how-theme=light] .how-result-price{color:#047857}
html[data-how-theme=light] .how-action-bar{border-color:#e5e5e5;background:#fafafa}
html[data-how-theme=light] .how-action-all,html[data-how-theme=light] .how-action-all:hover svg{color:#191919}
html[data-how-theme=light] .how-action-all svg{color:#555555}
html[data-how-theme=light] .how-action-hints{color:#747474}
html[data-how-theme=light] .how-action-hints kbd{background:#f4f4f4;color:#414141;box-shadow:inset 0 0 0 1px #e5e5e5}
html[data-how-theme=light] .how-action-sep{background:#d5d5d5}
html[data-how-theme=light] :is(.how-search-intro,.how-search-kbd,.how-search-chip){border-color:#e5e5e5}
html[data-how-theme=light] :is(.how-search-intro,.how-search-kbd,.how-search-popular-title){color:#555555}
html[data-how-theme=light] .how-search-kbd{background:#fff}
html[data-how-theme=light] .how-search-chip{background:#f4f4f4;color:#191919}
html[data-how-theme=light] .how-search-chip:hover{background:#e5e5e5}
html[data-how-theme=light] .how-search-top,html[data-how-theme=light] .how-top-media{border-color:#e5e5e5}
html[data-how-theme=light] .how-top-row{color:#191919}
html[data-how-theme=light] .how-top-row:is(:hover,:focus-visible){background:#f4f4f4}
html[data-how-theme=light] :is(.how-top-rank,.how-top-category){color:#747474}
html[data-how-theme=light] .how-top-price{color:#047857}

/* Search motion — Toolbar Expandable (width), Expanding Search Dock (glass), Command Menu (reveal, fly-in, sliding highlight) */
@keyframes how-fly-in{from{opacity:0;transform:translateY(8px);filter:blur(2px)}}
.how-header .how-action-panel{transition:clip-path .4s cubic-bezier(.32,.72,0,1),opacity .25s ease-out,transform .4s cubic-bezier(.32,.72,0,1)}
.how-header .how-action-panel[data-state=closed]{opacity:0;clip-path:inset(0 0 100% 0 round 14px);transform:translateX(-50%) translateY(-6px);transition:clip-path .18s ease-in,opacity .18s ease-in,transform .18s ease-in}
.how-header .how-action-panel[data-state=open]{opacity:1;clip-path:inset(0 0 0 0 round 14px)}
.how-header .how-action-panel[data-state=open] :is(.how-search-intro,.how-search-popular-title,.how-search-chip,.how-action-heading,.how-action-status,.how-action-bar){animation:how-fly-in .45s ease-out backwards}
.how-header .how-action-panel[data-state=open] .how-search-intro{animation-delay:40ms}
.how-header .how-action-panel[data-state=open] .how-search-popular-title{animation-delay:90ms}
.how-header .how-action-panel[data-state=open] .how-search-chip:nth-child(1){animation-delay:130ms}
.how-header .how-action-panel[data-state=open] .how-search-chip:nth-child(2){animation-delay:165ms}
.how-header .how-action-panel[data-state=open] .how-search-chip:nth-child(3){animation-delay:200ms}
.how-header .how-action-panel[data-state=open] .how-search-chip:nth-child(4){animation-delay:235ms}
.how-header .how-action-panel[data-state=open] .how-search-chip:nth-child(5){animation-delay:270ms}
.how-header .how-action-panel[data-state=open] .how-action-heading{animation-delay:30ms}
.how-header .how-action-panel[data-state=open] .how-search-top .how-search-popular-title{animation-delay:300ms}
.how-header .how-action-panel[data-state=open] .how-top-row{animation:how-fly-in .4s ease-out backwards;animation-delay:calc(340ms + var(--how-top-i,0) * 50ms)}
.how-header .how-action-panel[data-state=open] .how-action-bar{animation-delay:160ms}
.how-header .how-action-panel[data-state=open] .how-result-row{animation:how-fly-in .35s ease-out backwards;animation-delay:calc(var(--how-row-delay,0ms) + 40ms)}
.how-header #how-action-results{position:relative}
.how-header .how-result-row{position:relative;z-index:1}
.how-result-highlight{position:absolute;top:0;left:0;z-index:0;border:1px solid #2f2f2f;border-radius:10px;background:#171717;opacity:0;pointer-events:none;transition:opacity .15s}
.how-result-highlight[data-visible=true]{opacity:1}
.how-result-highlight[data-moves=true]{transition:transform .3s cubic-bezier(.32,.72,0,1),width .3s cubic-bezier(.32,.72,0,1),height .3s cubic-bezier(.32,.72,0,1),opacity .15s}
.how-header .how-search-submit{transform:scale(.4);transition:opacity .2s ease-out,transform .25s cubic-bezier(.34,1.56,.64,1)}
.how-header .how-action-search[data-has-query=true] .how-search-submit{transform:scale(1)}
@media (min-width:1101px){
.how-header .how-action-field{transition:width .26s cubic-bezier(.3,1.15,.55,1),margin-left .26s cubic-bezier(.3,1.15,.55,1),background-color .3s,border-color .16s ease-out,box-shadow .16s ease-out,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.how-header[data-search-open=true] .how-action-field{width:calc(100% + var(--how-search-grow,58px) * 2);margin-left:calc(var(--how-search-grow,58px) * -1);background:#282828cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.how-header .how-action-panel{width:calc(100% + var(--how-search-grow,58px) * 2)}
}
@media (max-width:1100px){
.how-header .how-action-panel[data-state=closed]{transform:translateY(-6px)}
.how-header[data-search-open=true] .how-action-field{background:#282828cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
html[data-how-theme=light] .how-result-highlight{background:#f4f4f4;border-color:#e5e5e5}
html[data-how-theme=light] .how-header[data-search-open=true] .how-action-field{background:#ffffffcc}
.how-account-trigger{display:flex;align-items:center;gap:8px;height:36px;padding:2px 8px 2px 2px;border:0;border-radius:999px;background:transparent;color:var(--how-text);cursor:pointer;transition:background-color 200ms ease}
.how-account-trigger:hover{background:#ffffff0f}
.how-account-avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;overflow:hidden;border-radius:999px;background:#645cfa;color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px}
.how-account-avatar img{width:100%;height:100%;object-fit:cover}
.how-account-who{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;line-height:1.15;text-align:left}
.how-account-who b{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--how-text)}
.how-account-who span{font-size:11px;color:var(--how-muted)}
.how-account-lines{position:relative;width:16px;height:12px;flex:none}
.how-account-lines span{position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform 300ms cubic-bezier(.2,.8,.2,1),opacity 200ms ease}
.how-account-lines span:nth-child(1){top:0}
.how-account-lines span:nth-child(2){top:5px}
.how-account-lines span:nth-child(3){top:10px}
/* o gatilho NAO vira X: a gaveta ja tem o seu botao de fechar, e dois X na mesma
   fileira confundem. As tres linhas so acendem junto com o resto do cabecalho. */
/* o empurrao: quem se mexe e a pagina, nao um veu por cima dela */
.how-palco{transform-origin:left center}
/* Transform identidade enquanto a gaveta esta em cena. Parece inofensivo, mas e ele que
     mantem o palco como referencial dos `position:fixed` de dentro, inclusive o
     cabecalho. **A transicao mora DENTRO desta regra, nao no `.how-palco`**: fora dela,
     ao tirar a classe o transform transicionaria de identidade para `none` por mais
     580ms, ainda como referencial, enquanto o `top` do cabecalho ja teria voltado, e o
     cabecalho sumia da tela. Transform e compensacao tem de nascer e morrer no mesmo
     recalculo. */
body.how-empurra-ativo .how-palco{transform:translateX(0) scale(1);transition:transform 580ms cubic-bezier(.32,.9,.3,1)}
body.how-empurrando .how-palco{transform:translateX(-58px) scale(.96)}
/* o cabecalho e position:fixed. Com transform no palco ele passa a se medir pelo palco
   (a pagina inteira) em vez da tela, entao devolvemos a rolagem enquanto durar o
   empurrao, inclusive na volta, senao ele salta para o topo do documento. */

/* A GEOMETRIA DO CABECALHO ANIMA SO NO COMPUTADOR (07/10/2026, a pedido dele).
   No `core.css` a transicao de `top`/`max-width` foi tirada em 30/09 porque, NO CELULAR,
   custava 51 layouts por rolagem. Acima de 1100px o custo e outro e o efeito e o que ele
   quer: a barra descola do topo, estreita e afina ao rolar, em vez de pular de estado.
   Os 1100px sao o mesmo corte que o `core.css` usa para o cabecalho do celular.
   O empurrao da gaveta continua instantaneo porque `body.how-empurra-ativo .how-header`
   declara `transition:none` e vem depois desta regra. */
@media (min-width:1101px){
  .how-header{transition:top 300ms var(--how-header-ease),max-width 300ms var(--how-header-ease)}
  .how-header .how-header-bar{transition:padding 300ms var(--how-header-ease),border-radius 300ms var(--how-header-ease),background-color 300ms var(--how-header-ease),border-color 300ms var(--how-header-ease),box-shadow 300ms var(--how-header-ease)}
}
@media (prefers-reduced-motion:reduce){
  .how-header,.how-header .how-header-bar{transition:none}
}

body.how-empurra-ativo .how-header{top:var(--how-empurra-y,0px);transition:none}
body.how-empurra-ativo .how-header[data-scrolled=true]{top:calc(var(--how-empurra-y,0px) + 12px + env(safe-area-inset-top,0px))}
/* o veu escurece por igual e fecha ao clicar fora. Escurecer com filter no palco
   deixava o fundo fixo da loja aceso em volta, criando faixa clara no topo. */
.how-account-veil{position:fixed;inset:0;z-index:2147483000;background:#0000;transition:background-color 480ms ease}
.how-account-veil.is-open{background:#00000073}
.how-account-veil[hidden]{display:none}
.how-account-drawer{position:fixed;top:0;right:0;bottom:0;z-index:2147483001;display:flex;flex-direction:column;width:348px;max-width:100vw;border-left:1px solid #1e1e1e;background:#0e0e0e;color:#fafafa;transform:translateX(100%);transition:transform 580ms cubic-bezier(.32,.9,.3,1);touch-action:none;user-select:none;overflow-y:auto}
.how-account-drawer[hidden]{display:none}
.how-account-drawer.is-open{transform:none}
.how-account-top{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 14px}
.how-account-top b{font-size:15px;font-weight:600}
.how-account-close{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #282828;border-radius:9px;background:#ffffff06;color:#b8b8b8;cursor:pointer;transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.how-account-close:hover{background:#ffffff14;color:#fafafa;border-color:#333333}
.how-account-close svg{width:15px;height:15px}
.how-account-close span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.how-account-card{display:flex;align-items:center;gap:11px;margin:0;padding:0 16px 15px;border-bottom:1px solid #1e1e1e;color:#fafafa;text-decoration:none}
.how-account-card .how-account-avatar{width:40px;height:40px;border-radius:12px;font-size:12.5px}
.how-account-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.how-account-id b{font-size:14px;font-weight:600}
.how-account-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7f7f7f;font-size:11.5px}
.how-account-pill{color:#34d399;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.how-account-card > svg{margin-left:auto;flex:none;width:15px;height:15px;color:#7f7f7f;transition:transform 260ms cubic-bezier(.34,1.5,.64,1)}
.how-account-card:hover > svg{transform:translateX(3px)}
.how-account-sec{margin:0;padding:16px 16px 7px;color:#7f7f7f;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.how-account-rows{display:flex;flex-direction:column;padding:0 10px}
.how-account-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;color:#b8b8b8;font:inherit;font-size:14.5px;text-align:left;text-decoration:none;cursor:pointer;transition:background-color 220ms ease,color 220ms ease,padding-left 300ms cubic-bezier(.34,1.5,.64,1)}
.how-account-row > svg:first-of-type{flex:none;width:19px;height:19px;color:#7f7f7f;transition:color 220ms ease}
.how-account-row:hover,.how-account-row:focus-visible{background:#ffffff0a;color:#fafafa;padding-left:17px;outline:none}
.how-account-row:hover > svg:first-of-type,.how-account-row:focus-visible > svg:first-of-type{color:#9a94fd}
.how-account-chev{margin-left:auto;width:15px;height:15px;color:#7f7f7f;opacity:0;transform:translateX(-4px);transition:opacity 220ms ease,transform 300ms cubic-bezier(.34,1.5,.64,1)}
.how-account-row:hover .how-account-chev,.how-account-row:focus-visible .how-account-chev{opacity:1;transform:none}
.how-account-foot{margin-top:auto;padding:13px 10px 18px;border-top:1px solid #1e1e1e}
.how-account-hint{margin:0;padding:0 12px 6px;color:#7f7f7f;font-size:11px}
.how-account-exit{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;color:#ef4444;font:inherit;font-size:14.5px;text-align:left;cursor:pointer;user-select:none;touch-action:none}
.how-account-exit svg{flex:none;width:19px;height:19px}
.how-account-fill{position:absolute;inset:0;z-index:0;width:0;background:#ef444421}
.how-account-exit > :not(.how-account-fill){position:relative;z-index:1}
.how-account-exit.is-done{color:#34d399}
.how-account-exit.is-done .how-account-fill{background:#34d39926}
html[data-how-theme=light] .how-account-drawer{background:#fff;border-color:#e5e5e5;color:#191919}
html[data-how-theme=light] .how-account-card{border-color:#e5e5e5;color:#191919}
html[data-how-theme=light] .how-account-close{background:#f4f4f4;border-color:#e5e5e5;color:#555555}
html[data-how-theme=light] .how-account-close:hover{background:#e5e5e5;color:#191919}
html[data-how-theme=light] .how-account-row{color:#414141}
html[data-how-theme=light] .how-account-row:hover{background:#f4f4f4;color:#191919}
html[data-how-theme=light] .how-account-row > svg:first-of-type{color:#747474}
html[data-how-theme=light] .how-account-top b{color:#191919}
html[data-how-theme=light] .how-account-foot{border-color:#e5e5e5}
html[data-how-theme=light] .how-account-pill{color:#0f9d74}
@media(max-width:1100px){.how-account-who{display:none}.how-account-lines{display:none}.how-account-trigger{gap:0;padding:2px}
/* com o gatilho da conta a fileira do topo cresce 44px; sem isto a busca (right:116px fixo no core.css) cai por cima do carrinho */
.how-has-account:not([data-search-open=true]) .how-action-search{right:160px}}
@media(max-width:640px){body.how-empurrando .how-palco{transform:translateX(-22px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.how-account-drawer,.how-palco,.how-account-row,.how-account-chev,.how-account-lines span,.how-account-card > svg{transition:none}}

/* Entre o corte do menu mobile e 1440 a barra estoura por dentro, entao aqui ela
     aperta padding, gap e fonte. **O piso `min-width:1101px` e obrigatorio**: sem ele a
     regra vaza para o celular e empurra a marca. */
/* o piso de 1101 existe porque abaixo disso o header ja e o do celular, com
   padding e gap proprios; sem ele esta regra vazava e mexia no respiro do mobile */
@media(min-width:1101px) and (max-width:1440px){
  .how-header-bar{padding-left:16px;padding-right:16px;gap:12px;grid-template-columns:max-content minmax(176px,460px) max-content}
  .how-nav-link{padding-left:9px;padding-right:9px;font-size:15px}
  .how-nav-links{gap:2px}
}

/* =====================================================================
     BUSCA SEM EFEITO CARO NO CELULAR
     Cada um destes custa POR QUADRO, e o campo muda de quadro a cada letra e a cada
     piscada do cursor. No toque nenhum deles entrega nada, e o painel cobre quase a
     tela. **No computador todos continuam.**
     Saem: `backdrop-filter` (o mais caro, reamostra tudo que esta atras), `clip-path`
     do painel, `how-fly-in` com `blur` em cada linha, a mascara de esmaecido, o realce
     deslizante e o contador animado.
     ===================================================================== */
@media (max-width:1100px){
  /* **A BUSCA DO CELULAR NAO E TELA CHEIA.** Ela ja foi, entre 30/09 e 30/09, e ele pediu de
     volta o painel: a tela cheia esticava a lista num vazio enorme e tirava a pagina de vista.
     O painel fica preso ao campo, com cantos, e a pagina atras continua rolando.
     **Nao recolocar sem pedido:** o que sai junto e `html.how-busca-cheia{overflow:hidden}`, o
     fundo opaco na barra do cabecalho e o `max-height:none` na lista. */

  .how-header[data-search-open=true] .how-action-field{-webkit-backdrop-filter:none;backdrop-filter:none;background:#282828}
  /* ABRIR A BUSCA NAO ANIMA MAIS LARGURA NO CELULAR, e esta e a queda de quadro que aparece no
     TOQUE DA LUPA, antes do teclado chegar. O `core.css` anima `width` E `right` do contorno da
     busca por 260ms, e as duas sao propriedades de LAYOUT: o navegador reposiciona o contorno, o
     campo, o input, o botao da lupa e o botao de enviar a cada quadro.
     No computador tudo continua: la a animacao e parte do desenho aprovado e sobra processador.
     O painel segue aparecendo com `opacity`, que e de compositor e nao custa layout.
     A largura do campo interno (`--how-search-grow`) ja era so do computador. */
  .how-header .how-action-search{transition:none}
  .how-header .how-action-field{transition:border-color .16s ease-out}
  .how-header .how-action-panel{transition:opacity .18s ease-out}
  .how-header .how-action-panel[data-state=closed]{clip-path:none;transform:none;transition:opacity .14s ease-in}
  .how-header .how-action-panel[data-state=open]{clip-path:none}
  .how-header .how-action-panel[data-state=open] :is(.how-search-intro,.how-search-popular-title,.how-search-chip,.how-action-heading,.how-action-status,.how-action-bar,.how-top-row,.how-result-row){animation:none}
  /* O esmaecido do fim da lista e mascara: recorta a cada pintura, e a lista repinta a
     cada busca. */
  .how-header #how-action-results[data-more=true]{-webkit-mask-image:none;mask-image:none}
  /* O realce deslizante segue o CURSOR. No toque ele nunca aparece de proposito, so por
     acidente quando o dedo passa rolando, e cada movimento dele le quatro medidas de
     layout seguidas de escrita de estilo. */
  .how-result-highlight{display:none}
  /* A varredura do heroi para enquanto a busca esta aberta: e animacao em laco infinito
     sobre uma faixa da home que o painel do celular justamente cobre. `:has()` e preciso
     porque cabecalho e home sao IRMAOS, nao ha descendencia entre eles. */
  html:has(.how-header[data-search-open=true]) .how-hero-grade-varre > i{animation-play-state:paused}
}

/* ======================== gaveta do carrinho ======================== */
/* Estava em `components/cart-drawer.html`. Nao pode morar no `cart-drawer-item`,
   que e renderizado dentro de uma template string do JS. */
/* Cada produto vira um quadro proprio, a pedido do usuario: com varios itens na lista
   a imagem de um colava no texto do outro e nao dava para saber onde um terminava. */
.how-cart-item{padding:12px 10px;border:1px solid rgb(255 255 255 / .09);border-radius:14px;
  background:rgb(255 255 255 / .03);transition:border-color .18s ease,background-color .18s ease}
.how-cart-item:hover{border-color:rgb(255 255 255 / .17);background:rgb(255 255 255 / .05)}

/* A moldura come 24px de largura. Sem isto a linha nao cabe nos 450px da gaveta e o bloco
     dos botoes cai para baixo, porque o pai e `flex-wrap`. */
.how-cart-info{flex:1;min-width:196px}
.how-cart-texto{flex:1;min-width:120px}
.how-cart-texto h5{overflow-wrap:anywhere}
.how-cart-acoes{flex:none}
.how-cart-arte{flex:none}
/* O minimo precisa ser 196px (64 da arte + 12 do vao + 120 do texto). Com `min-width:0` o
     bloco da esquerda encolhia POR DENTRO em vez de o pai quebrar a linha, e no celular os
     botoes saiam pela direita da gaveta com o nome espremido em 81px. */
.how-cart-info{gap:12px}
.how-cart-acoes{gap:6px}

/* Mesmo verde do preco da pagina do produto (`--hp-green`), a pedido do usuario. */
.how-cart-preco{color:#34d399}
#cart-pricing .how-cart-total{color:#34d399}

html[data-how-theme=light] .how-cart-item{border-color:rgb(0 0 0 / .12);background:rgb(0 0 0 / .02)}
html[data-how-theme=light] .how-cart-item:hover{border-color:rgb(0 0 0 / .22);background:rgb(0 0 0 / .04)}
/* o verde claro e o mesmo que a pagina do produto usa no tema claro: #34d399 sobre
   fundo branco nao tem contraste */
html[data-how-theme=light] :is(.how-cart-preco,#cart-pricing .how-cart-total){color:#047857}

/* ============================= rodape ============================== */
/* Estava em `components/footer.html`. No documento ele era o ULTIMO bloco; aqui vem
   antes do CSS da pagina. Conferido que nenhuma pagina usa prefixo `hf-`. */
/* A `.hf-bottom` deixou de existir, e era ela que zerava a margem dos `<p>` e definia o
   tamanho do texto; quem faz isso agora e a propria `.hf-empresa`. */
.hf-empresa{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;margin-top:16px;font-size:13px;line-height:22px}
.hf-empresa p{margin:0}
.hf-cadastro{color:rgb(var(--muted-foreground));font-size:12.5px}

/* O espaco do selo fica reservado (142x52, o tamanho do modelo horizontal_2) para a coluna
   nao pular quando o script da ReclameAqui termina de desenhar. */
.hf-selo{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;min-width:142px;min-height:52px;margin-top:20px}

/* ================= A FONTE DE RESERVA TEM A METRICA DA INTER =================
   MEDIDO pelo PageSpeed no celular em 30/09/2026: **CLS de 0,102, e 0,101 dele num unico
   salto** da secao `.how-hc` (Nossas Categorias), atribuido pelo proprio relatorio ao
   arquivo `.woff2` da fonte. Foi regressao nossa: ao tirar a folha do Google Fonts do
   caminho que bloqueia a pintura, o primeiro desenho passou a sair na fonte do sistema e a
   trocar para a Inter quando ela chega. A troca mudava a ALTURA e a LARGURA do texto do
   heroi, o texto reembrulhava, e tudo abaixo dele descia.

   `size-adjust` faz a reserva ocupar a MESMA largura por caractere que a Inter, entao o
   texto embrulha nas mesmas linhas; `ascent-override` e `descent-override` fazem a linha
   ter a mesma altura. Com as duas coisas iguais, a troca nao move nada.

   **ESTA RESERVA NAO E PERFEITA, E NAO TEM COMO SER.** Varri o `size-adjust` de 103% a 109%
   medindo os dois textos que mandam no layout da primeira tela, e as faixas NAO SE CRUZAM:
   o `h1` do heroi (34px, peso 800) so fecha nas mesmas 2 linhas da Inter a partir de 105%,
   e o nome "ASSINATURAS PREMIUM" so cabe em 1 linha ate 103%. Acima de 103% ele quebra em
   duas. O motivo e o peso: a reserva e Arial, que nao tem 800, entao o navegador engorda o
   traco por conta propria, e essa engorda nao acompanha a Inter 800. Um numero so nao serve
   para um titulo de 34px/800 e para um rotulo de 13px/500 ao mesmo tempo.

   Escolhi 106,32% (a razao medida sobre o texto corrido do heroi) porque **o erro do `h1`
   custa 35px de salto e o do nome custa 15,5**, e o do nome ainda por cima acontece dentro
   de um cartao de altura fixa, onde nao empurra nada.
   Na altura, a Inter da 1,25em por linha (ascender 0,97 + descender 0,24 + folga 0,04), e
   por isso o `line-gap-override` nao e zero: sem ele a reserva dava 1,21em e tres linhas
   fechavam 57px onde a Inter fecha 60.

   **QUEM RESOLVE O SALTO DE VERDADE E O `preload` DO ARQUIVO DA FONTE**, no
   `layouts/layout.html`: ele faz a Inter chegar antes da primeira pintura, e sem troca nao
   ha salto. Medido: 7 rodadas com preload deram CLS 0; sem ele, a rodada rapida deu 0,104 e
   as lentas deram 0 (nas lentas a fonte chega antes da pintura de qualquer jeito). A reserva
   e a segunda linha de defesa, para quando o preload nao chegar a tempo.

   Arial e Liberation Sans tem metrica identica, e Liberation e o que o Chrome sem cabeca
   do PageSpeed usa no Linux, entao o mesmo ajuste vale para a medicao e para o computador
   do visitante. O Roboto do Android fica no fim como ultimo recurso: nao e identico, mas
   erra menos que `sans-serif` cru.

   **NAO TIRAR A RESERVA DA PILHA `font-family` SEM DEVOLVER A FOLHA PARA BLOQUEANTE.**
   Uma coisa paga a outra: sem bloquear a pintura ganhamos ~895ms, e e esta familia que
   impede que isso vire salto de texto. As duas juntas, ou nenhuma. */
@font-face {
  font-family: 'Inter Reserva';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Roboto');
  font-weight: 100 900;
  font-style: normal;
  ascent-override: 91.23%;
  descent-override: 22.57%;
  line-gap-override: 3.76%;
  size-adjust: 106.32%;
}


/* =============== A INTER E DECLARADA AQUI, E NAO PELA FOLHA DO GOOGLE ===============
   POR QUE (30/09/2026). A folha do Google Fonts era ligada com `media="print"` mais um
   `onload` que a devolvia para `all`, truque para ela nao bloquear a pintura. O efeito
   colateral so apareceu medindo: **a folha passa a valer DEPOIS da primeira pintura**, e a
   pagina redesenha com outra fonte naquele instante. Isso nao e "troca de fonte" no sentido
   do `font-display`, e uma folha nova entrando em vigor, entao **nem `swap` nem `optional`
   impedem**. Medido: 0,103 de CLS com `swap`, 0,103 a 0,165 com `optional`, e 0,002 quando
   o arquivo da fonte era bloqueado.

   Aqui a regra vive num arquivo que JA bloqueia a pintura, entao ela existe antes do
   primeiro desenho. O arquivo em si vem do `preload` no `layouts/layout.html` e chega por
   volta dos 520ms. Resultado: a Inter esta pronta quando a pagina desenha pela primeira
   vez, e nao ha segundo desenho.

   `font-display: optional` e a rede de seguranca: se o arquivo atrasar, o navegador desenha
   na fonte do sistema e **nao troca no meio da visita**. Na visita seguinte ele ja tem a
   fonte em cache e usa desde o primeiro quadro.

   **OS ENDERECOS TEM VERSAO (`/v20/`) E MUDAM QUANDO O GOOGLE ATUALIZA A INTER.** Se isso
   acontecer o arquivo da 404 e o site cai na familia de reserva abaixo: fica feio, nao
   quebra. Para atualizar, pegar os blocos `latin` e `latin-ext` de:
     curl -H "User-Agent: <UA de Chrome>" "https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=optional"
   e trocar tambem a URL do `preload` no `layouts/layout.html`. Sao os mesmos arquivos. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PULAR PARA O CONTEUDO. Fora da tela ate receber foco; nunca `display:none` nem
   `visibility:hidden`, que tirariam o link da ordem de tabulacao e o tornariam inalcancavel.
   `z-index` alto porque o cabecalho e fixo e passaria por cima. */
.how-pular{position:fixed;top:8px;left:8px;z-index:100;padding:10px 16px;border-radius:10px;
  background:rgb(var(--primary));color:rgb(var(--primary-foreground));font-size:14px;font-weight:600;
  text-decoration:none;clip-path:inset(50%);opacity:0;pointer-events:none}
.how-pular:focus{clip-path:none;opacity:1;pointer-events:auto}
#conteudo:focus{outline:none}