/* Camada do blog da INFINIT sobre o CSS compilado do site (assets/site/source.css).
   Usa os tokens do próprio site (hsl(var(--background)), --color-neutral-*, --color-brand-*),
   que trocam sozinhos com html.dark. Medidas vêm de /customer-stories e da história Hudson Autos. */ :root{--inf-ease: cubic-bezier(0.4,0,0.2,1);--inf-ease-out: cubic-bezier(0.16,1,0.3,1);--motion-fast: 150ms;--motion-normal: 300ms;--motion-slow: 500ms;--ease-out: var(--inf-ease-out);--ease-standard: var(--inf-ease);--inf-yellow: #ffdd32;--inf-yellow-hover: #ffe45b;--inf-ink: #171717;}/* O source.css define html{scroll-behavior:smooth}; aqui a rolagem suave fica só no índice (inf.js),
   para não animar rolagens programáticas nem ignorar reduced-motion. */ html{scroll-behavior: auto;}/* A reserva da barra de rolagem só vale com o menu mobile aberto: o Chrome atual reserva 15px com
   `scrollbar-gutter: stable` mesmo com barras sobrepostas, o que estreitava o shell em relação a
   infinit.com (que não reserva). Com o menu aberto a página trava e a reserva evita o salto lateral. */ html.inf-menu-open{overflow: hidden;scrollbar-gutter: stable;}body{background: hsl(var(--background));}.inf-skip{position: absolute;left: 16px;top: -64px;z-index: 60;padding: 8px 12px;border-radius: 4px;background: var(--inf-yellow);color: var(--inf-ink);font-size: 14px;}.inf-skip:focus{top: 12px;}.inf-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}/* Foco visível (ajuste de acessibilidade; o site só desenha anel nos CTAs). */ :where(.inf-main,[data-site-header],[data-site-footer],.inf-panel) a:focus-visible,:where(.inf-main,[data-site-header],[data-site-footer],.inf-panel) button:focus-visible,:where(.inf-main) input:focus-visible{outline: 2px solid hsl(var(--foreground));outline-offset: 2px;}[data-site-footer] a:focus-visible,[data-site-footer] button:focus-visible{outline-color: #fff;}/* Logo da nav: o PNG do site é escuro; no tema escuro o site mostra a versão clara. */ html.dark .inf-logo{filter: invert(1) brightness(1.1);}/* Menu mobile: mesmo painel do site, com fade de entrada (o site anima a opacidade). */ .inf-mobile-menu{transition: opacity 200ms var(--inf-ease);}.inf-mobile-menu.is-entering{opacity: 0;}.inf-mobile-menu[hidden]{display: none;}.inf-social{display: inline-flex;width: 24px;height: 24px;}/* Cabeçalho da página: busca e contagem na mesma linha dos filtros de /customer-stories. */ .inf-search{display: flex;flex: 1 1 320px;max-width: 480px;gap: 8px;min-width: 0;}.inf-search__input{flex: 1;min-width: 0;height: 36px;padding: 0 12px;border: 1px solid hsl(var(--border));border-radius: 4px;background: hsl(var(--background));color: hsl(var(--foreground));font: inherit;font-size: 14px;}.inf-search__input::placeholder{color: hsl(var(--muted-foreground));}.inf-search__input:focus{outline: none;border-color: hsl(var(--foreground));}.inf-eyebrow-row{margin-bottom: 20px;}/* Grade: divisórias de 1px como em /customer-stories; a célula que sobra na última linha
   recebe o fundo da página em vez da cor da divisória. */ .inf-grid::after{content: "";grid-column: auto / -1;background: hsl(var(--background));}.inf-grid > div{min-width: 0;}/* Clamp de título e resumo nos cards (valor completo no DOM + title para o tooltip). */ .inf-clamp-2,.inf-clamp-3{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;overflow-wrap: anywhere;}.inf-clamp-2{-webkit-line-clamp: 2;line-clamp: 2;}.inf-clamp-3{-webkit-line-clamp: 3;line-clamp: 3;}.inf-card__meta{display: flex;flex-wrap: wrap;align-items: center;gap: 0 6px;}.inf-sep{color: hsl(var(--muted-foreground));}.post-card__media img{height: 100%;}.post-card__fallback{margin: 0;background: #fff;}html.dark .inf-fallback{filter: invert(1);}html.dark .post-card__fallback{background: #000;}/* Paginação: página atual não clicável com is-current + aria-current. */ .inf-pagination{display: flex;flex-wrap: wrap;justify-content: center;gap: 4px;padding: 32px 24px;}.inf-page{display: inline-flex;align-items: center;justify-content: center;gap: 6px;min-width: 36px;height: 36px;padding: 0 12px;border-radius: 9999px;color: hsl(var(--muted-foreground));font-size: 14px;transition: color 150ms var(--inf-ease),background-color 150ms var(--inf-ease);}.inf-page:hover{color: hsl(var(--foreground));}.inf-page.is-current{background: hsl(var(--muted));color: hsl(var(--foreground));}/* Busca vazia */ .inf-empty{display: flex;justify-content: flex-start;}/* Single: breadcrumb com o título encurtado em uma linha. */ .inf-breadcrumb{display: flex;min-width: 0;white-space: nowrap;}.inf-breadcrumb__current{overflow: hidden;text-overflow: ellipsis;}.inf-nowrap{white-space: nowrap;flex-shrink: 0;}/* Layout do artigo: no desktop a sidebar fica à esquerda (280px), como na história de cliente;
   no DOM ela vem depois do corpo, então no mobile aparece após o artigo, sem reordenação. */ .inf-article-layout{display: grid;}@media (width >= 64rem){.inf-article-layout{grid-template-columns: 280px minmax(0,1fr);}.inf-article-main{grid-column: 2;grid-row: 1;}.inf-sidebar{grid-column: 1;grid-row: 1;}}.inf-sidebar{border-top: 1px solid hsl(var(--border));}@media (width >= 64rem){.inf-sidebar{border-top: 0;}}.inf-sidebar__sticky{position: static;align-self: start;}.inf-sidebar__sticky.is-sticky{position: sticky;top: 112px;}.inf-toc{display: none;}@media (width >= 64rem){.inf-toc{display: block;margin-bottom: 40px;}}.inf-toc a.is-active{border-color: hsl(var(--foreground));color: hsl(var(--foreground));}.sidebar-conversion{display: grid;gap: 12px;padding: 24px;border: 1px solid hsl(var(--border));background: var(--color-brand-25,#fffadf);}html.dark .sidebar-conversion{background: hsl(var(--muted));}.sidebar-conversion__title{font-size: 20px;line-height: 1.3;letter-spacing: -0.02em;color: hsl(var(--foreground));}@media (width < 64rem){.sidebar-conversion{max-width: 520px;}}/* Imagem destacada da single: largura limitada pelo arquivo real, sem ampliar. */ .inf-figure{margin: 0 0 48px;}.inf-figure img{display: block;width: 100%;height: auto;}.inf-figure--wide,.inf-figure--compact{max-width: min(100%,var(--single-image-source-width));}/* Corpo editorial: mesmos tamanhos da história de cliente (16px/1.65, h2 18px medium). */ .inf-prose{color: hsl(var(--foreground));font-size: 16px;line-height: 1.65;overflow-wrap: break-word;}.inf-prose > * + *{margin-top: 20px;}.inf-prose h2{margin-top: 64px;margin-bottom: 16px;scroll-margin-top: 96px;font-size: 18px;font-weight: 500;line-height: 1.4;}.inf-prose h3{margin-top: 40px;margin-bottom: 12px;scroll-margin-top: 96px;font-size: 16px;font-weight: 500;line-height: 1.5;}.inf-prose h2 + *,.inf-prose h3 + *{margin-top: 0;}.inf-prose ul,.inf-prose ol{padding-left: 1.25em;}.inf-prose ul{list-style: disc;}.inf-prose ol{list-style: decimal;}.inf-prose li + li{margin-top: 8px;}.inf-prose li::marker{color: hsl(var(--muted-foreground));}.inf-prose strong{font-weight: 500;}.inf-prose a:not(.solid-button){text-decoration: underline;text-underline-offset: 4px;transition: color 150ms var(--inf-ease);}.inf-prose a:not(.solid-button):hover{color: hsl(var(--muted-foreground));}.inf-prose figure{margin: 40px 0;}.inf-prose figure img{display: block;width: 100%;height: auto;border: 1px solid hsl(var(--border));}.inf-prose figcaption{margin-top: 8px;font-size: 12px;color: hsl(var(--muted-foreground));}.inf-prose blockquote{font-weight: 500;}/* Botão editorial: o CTA amarelo do site (36px, raio 4px, peso 350). */ .inf-prose a.solid-button{display: inline-flex;align-items: center;justify-content: center;min-height: 36px;padding: 6px 12px;max-width: 100%;border-radius: 4px;background: var(--inf-yellow);color: var(--inf-ink);font-size: 14px;font-weight: 350;line-height: 20px;text-align: center;text-decoration: none;white-space: normal;transition: background-color 150ms var(--inf-ease),filter 150ms var(--inf-ease);}.inf-prose a.solid-button:hover{background: var(--inf-yellow-hover);}.inf-prose a.solid-button:active{filter: brightness(0.96);}.inf-prose a.solid-button:focus-visible{outline: none;box-shadow: 0 0 0 3px rgb(255 221 50 / 0.5);}/* Tabela: só o wrapper rola no mobile. */ .inf-prose .table-scroll{max-width: 100%;overflow-x: auto;border: 1px solid hsl(var(--border));-webkit-overflow-scrolling: touch;}.inf-prose .table-scroll:focus-visible{outline: 2px solid hsl(var(--foreground));outline-offset: 2px;}.inf-prose table{width: 100%;min-width: 520px;border-collapse: collapse;font-size: 14px;line-height: 1.5;}.inf-prose caption{padding: 12px 16px;text-align: left;font-size: 12px;letter-spacing: 0.06em;text-transform: uppercase;color: hsl(var(--muted-foreground));}.inf-prose th,.inf-prose td{padding: 12px 16px;border-top: 1px solid hsl(var(--border));text-align: left;vertical-align: top;}.inf-prose thead th{font-weight: 500;background: hsl(var(--muted));}.inf-prose tbody th{font-weight: 500;}/* Painel flutuante da campanha (aside complementar, sem modal). */ .inf-panel{position: fixed;left: 16px;right: 16px;bottom: 16px;z-index: 30;overflow: hidden;border: 1px solid hsl(var(--border));background: hsl(var(--background));box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);transition: opacity 300ms var(--inf-ease-out),transform 300ms var(--inf-ease-out);}.inf-panel[hidden]{display: none;}.inf-panel.is-entering{opacity: 0;transform: translateY(16px);}.inf-panel__image{display: block;width: 100%;height: auto;border-bottom: 1px solid hsl(var(--border));}.inf-panel__body{display: grid;gap: 12px;padding: 20px;}.inf-eyebrow{font-size: 12px;letter-spacing: 0.06em;text-transform: uppercase;color: hsl(var(--muted-foreground));}.inf-panel__title{font-size: 20px;line-height: 1.3;letter-spacing: -0.02em;color: hsl(var(--foreground));}.inf-panel__close{position: absolute;top: 8px;right: 8px;display: grid;place-items: center;width: 36px;height: 36px;padding: 6px;border: 0;border-radius: 4px;background: hsl(var(--background));color: hsl(var(--foreground));cursor: pointer;}.inf-panel__close:hover{background: hsl(var(--muted));}@media (width >= 40rem){.inf-panel{left: auto;width: 360px;}}@media (width >= 48rem){.inf-panel{right: 24px;bottom: 24px;}}@media (prefers-reduced-motion: reduce){.inf-panel,.inf-mobile-menu,.post-card__media img,[data-site-header] *,.inf-prose a{transition: none !important;animation: none !important;}.group:hover .post-card__media img{transform: none;}}.inf-section-title{padding-bottom: 24px;}/* Geometria explícita das imagens recortadas (o validador da skill não lê as utilidades
   arbitrárias do Tailwind; os valores repetem os do site: 16/10 nos cards, 4/3 no destaque). */ .post-card__media{aspect-ratio: 16 / 10;}.inf-featured .post-card__media{aspect-ratio: 4 / 3;}.post-card__media img,.inf-fallback{width: 100%;height: 100% !important;object-fit: cover;}.inf-band__pattern{height: 120px;}/* Faixa da CTA: grade de pontos do banner-bg.svg (invertida, como no site) desenhada em CSS; como <img>
   ela virava o LCP de páginas curtas (busca vazia) no WordPress. */ .inf-band__dots{position: absolute;inset-inline: 0;top: -30%;height: 160%;pointer-events: none;background-image: radial-gradient(circle,rgb(0 0 0 / 0.07) 0.7px,transparent 1.1px);background-size: 17.5px 17.5px;background-position: 8px 8px;}html.dark .inf-band__dots{background-image: radial-gradient(circle,rgb(255 255 255 / 0.07) 0.7px,transparent 1.1px);}[data-site-footer]{min-height: 0px;}[data-site-footer] > img{height: 100% !important;object-fit: cover;}.inf-panel__image,.inf-figure img,.inf-prose figure img{height: auto !important;}.inf-header{display: contents;}.table-scroll{max-width: 100%;overflow-x: auto;}/* ---------------------------------------------------------------------------------------------
   Movimento (02/11/2026, pedido do Joisiney). Valores medidos em infinit.com
   (intake/motion-observed/): o hero entra com fade + 20px em ~600ms; seções e grades entram uma
   vez ao rolar, fade + 20px em 500ms com stagger de 50ms; linhas de produto entram pelos lados
   (±30px). A curva medida coincide com o `ease` do CSS. Parallax não existe no site: é adaptação
   pedida, leve e só no desktop (>= 1024px). Tudo some com prefers-reduced-motion e sem JavaScript
   o conteúdo continua visível (html.inf-motion só é ligado pelo script do <head>).
   --------------------------------------------------------------------------------------------- */ :root{--inf-reveal-dur: 500ms;--inf-load-dur: 600ms;--inf-step: 50ms;--inf-reveal-ease: ease;}@keyframes inf-fade-up{from{opacity: 0;transform: translate3d(0,20px,0);}to{opacity: 1;transform: none;}}@keyframes inf-fade-left{from{opacity: 0;transform: translate3d(-30px,0,0);}to{opacity: 1;transform: none;}}@keyframes inf-fade-right{from{opacity: 0;transform: translate3d(30px,0,0);}to{opacity: 1;transform: none;}}@media (prefers-reduced-motion: no-preference){html.inf-motion [data-reveal-load]{animation: inf-fade-up var(--inf-load-dur) var(--inf-reveal-ease) both;animation-delay: calc(var(--i,0) * var(--inf-step));}html.inf-motion [data-reveal-load][data-reveal-from="left"]{animation-name: inf-fade-left;}html.inf-motion [data-reveal-load][data-reveal-from="right"]{animation-name: inf-fade-right;}html.inf-motion [data-reveal].is-pending{opacity: 0;transform: translate3d(0,20px,0);}html.inf-motion [data-reveal].is-revealing{transition: opacity var(--inf-reveal-dur) var(--inf-reveal-ease),transform var(--inf-reveal-dur) var(--inf-reveal-ease);transition-delay: var(--inf-delay,0ms);}}/* Grade de pontos no topo das páginas de listagem: o mesmo passo (17,5px) e ponto (~1,4px) do
   banner-bg.svg do site, desenhados em CSS. Como <img>, o SVG de 1440x576 virava o LCP da página no
   WordPress (02/11/2026); um gradiente não é candidato a LCP. */ .inf-hero-dots{position: absolute;inset-inline: 0;top: 0;height: 360px;pointer-events: none;background-image: radial-gradient(circle,rgb(23 23 23 / 0.16) 0.7px,transparent 1.1px);background-size: 17.5px 17.5px;background-position: 8px 8px;-webkit-mask-image: linear-gradient(to bottom,#000 35%,transparent);mask-image: linear-gradient(to bottom,#000 35%,transparent);}html.dark .inf-hero-dots{background-image: radial-gradient(circle,rgb(255 255 255 / 0.12) 0.7px,transparent 1.1px);}/* Parallax (só com html.inf-parallax, ligado pelo inf.js no desktop e sem reduced-motion).
   Imagens dos cards: escala-base 1.06 para o deslocamento de até 12px não mostrar borda;
   a imagem segue bem abaixo do tamanho real do arquivo (sem ampliar o raster). */ html.inf-parallax [data-parallax],html.inf-parallax [data-parallax-media]{will-change: transform;}html.inf-parallax [data-parallax-media]{transform: translate3d(0,var(--inf-py,0px),0) scale(1.06);transition: filter 500ms ease,scale 500ms ease;}html.inf-parallax [data-parallax]{transform: translate3d(0,var(--inf-py,0px),0);}@media (prefers-reduced-motion: reduce){[data-reveal-load],[data-reveal]{animation: none !important;opacity: 1 !important;transform: none !important;}[data-parallax],[data-parallax-media]{transform: none !important;}}/* Desempate de LCP (02/11/2026): as imagens da primeira linha têm o mesmo tamanho e o arredondamento das
   colunas deixava a 2ª ou a 3ª 1px maior, trocando o LCP por uma imagem lazy. A moldura do primeiro card
   (a imagem promovida, eager + fetchpriority=high) fica ~0,4% mais alta (16/10,06), compensado exatamente na margem
   (0,375% da largura), sem mover o resto do card. */ .inf-grid > div:first-child .post-card__media{aspect-ratio: 16 / 10.06;margin-bottom: -0.375%;}/*adapter=scripts/adapt_wp_theme.py*/.pagination .page-link.is-current,.pagination .page-link[aria-current="page"]{background:hsl(var(--muted));color:hsl(var(--foreground))}.pagination .page-link:focus-visible{outline:2px solid hsl(var(--foreground));outline-offset:2px}.pagination .page-link{min-height:36px;padding:0 12px}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;white-space:nowrap}.skip-link.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;overflow:visible;position:fixed !important;top:12px;left:16px;z-index:100000;padding:8px 12px;background:#ffdd32;color:#171717;border-radius:4px;font-size:14px;text-decoration:none}