/* Transicao entre documentos: a regra tem que existir nas DUAS paginas, senao o navegador nao anima (a de saida e a de entrada precisam concordar). Ver o bloco equivalente no index.html. */ @view-transition{navigation:auto} @media (prefers-reduced-motion:reduce){@view-transition{navigation:none}} ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s} /* ============================================================================= capabilities.css : fundações visuais da página /capabilities (catálogo). Tokens, reset, botões, chips, nav, footer, seletor de idioma e toggle de tema são COPIADOS de public/index.html para a página nova nascer idêntica à landing sem depender de build nem de CSS compartilhado (o site é HTML/CSS/JS puro). Se um token mudar no index.html, mude aqui também. Não há import: a landing mantém o CSS inline no e esta página tem folha própria de propósito, para que duas pessoas possam mexer nos dois arquivos sem conflito. ============================================================================= */ :root{ color-scheme:dark; --page-bg:#232120; --ground:#1b1917; --ground-2:#1c1917; --primary:#E35227; --primary-2:#F0824E; --amber:#F89C4D; --fg:#f1f3f4; --muted:#a7a3a0; --muted-2:#7c7873; --glass:rgba(28,25,23,.5); --glass-strong:rgba(22,20,19,.72); --panel:rgba(30,27,24,.55); --hair:rgba(255,255,255,.10); --hair-strong:rgba(255,255,255,.18); --field:rgba(255,255,255,.05); --success:#22a06b; --radius:18px; --radius-lg:22px; --maxw:clamp(1120px,90vw,1760px); --gutter:clamp(22px,4.5vw,72px); --font:"Avenir Next","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* ===== RITMO VERTICAL : um lugar só para a densidade ===== Escala por LARGURA (clamp/vw). Numa tela larga e BAIXA os clamps ja estao no teto enquanto a altura aperta, por isso a compactacao e gateada por ALTURA (bloco @media mais abaixo), nunca por largura. Mesma mecanica do index.html. */ --h1: clamp(40px,6.4vw,86px); --h2: clamp(30px,4.4vw,46px); --lead-size: clamp(16px,1.4vw,19px); --hero-h1: clamp(30px,4.2vw,56px); --hero-gap: clamp(22px,2.8vw,34px); --hero-pt: 80px; --hero-pb: 60px; --section-pad: clamp(72px,10vw,120px); --cta-h2: clamp(34px,5vw,52px); --nav-h: 58px; --nav-pad: 8px; --spec-hi: rgba(255,255,255,.55); /* brilho do contorno animado da busca */ --sheen: inset 0 1px 0 rgba(255,255,255,.08); --shadow: 0 30px 80px rgba(0,0,0,.55); } /* ===== LIGHT MODE : valores claros dos tokens base (primary mantém-se) ===== */ :root[data-theme="light"]{ color-scheme:light; --page-bg:#f4f1ec; --ground:#efeae3; --ground-2:#eae4dc; --fg:#232120; --muted:#6b6560; --muted-2:#8a857f; --glass:rgba(255,255,255,.66); --glass-strong:rgba(255,255,255,.82); --panel:rgba(255,255,255,.72); --hair:rgba(35,33,32,.12); --hair-strong:rgba(35,33,32,.2); --field:rgba(35,33,32,.04); --sheen: inset 0 1px 0 rgba(255,255,255,.7); --shadow: 0 24px 60px rgba(35,33,32,.14); } /* base do html ANTES das media queries de altura: mesma especificidade, então quem vem depois ganha. Com esta regra no fim do arquivo a alavanca de rem ficava morta e a página não compactava em viewport baixa. */ html{scroll-behavior:smooth;font-size:100%;-webkit-text-size-adjust:100%} /* ===== COMPACTAÇÃO POR ALTURA DE VIEWPORT ===== Gateado por ALTURA de proposito: a escala e por largura (clamp/vw) e a 2560 e a 1710 de largura os clamps dao o MESMO valor, entao largura nao distingue a tela confortavel da apertada. Fica DEPOIS dos dois blocos :root de proposito: um :root declarado abaixo de uma media query com a mesma especificidade GANHA dela. O `html{font-size}` e a alavanca central: TODOS os font-size desta pagina sao rem e o padding de botao/chip/campo esta em em, entao texto E caixa encolhem juntos. */ @media (max-height:1100px){ html{font-size:85%} /* 16 -> 13.6px */ :root{ --h1: clamp(38px,4.8vw,60px); --h2: clamp(28px,3.3vw,35px); --lead-size: clamp(15px,1.15vw,16.5px); --hero-h1: clamp(28px,3.2vw,42px); --section-pad: clamp(44px,5.6vw,66px); --hero-gap: clamp(15px,1.8vw,22px); --hero-pt: 58px; --hero-pb: 38px; --cta-h2: clamp(30px,3.7vw,37px); --nav-h: 48px; --nav-pad: 7px; } } /* Segundo degrau: notebook menor, ou janela nao maximizada. */ @media (max-height:920px){ html{font-size:82%} /* ~13.1px */ :root{ --h1: clamp(34px,4.3vw,52px); --h2: clamp(26px,3vw,32px); --hero-h1: clamp(26px,2.9vw,38px); --section-pad: clamp(36px,4.8vw,54px); --hero-gap: clamp(13px,1.5vw,19px); --hero-pt: 50px; --hero-pb: 32px; --cta-h2: clamp(27px,3.2vw,33px); --nav-h: 45px; --nav-pad: 6px; } } /* Terceiro degrau: zoom de 150% do Windows num 1080p (~720px de altura). */ @media (max-height:780px){ html{font-size:79%} /* ~12.6px */ :root{ --h1: clamp(30px,3.9vw,45px); --h2: clamp(24px,2.7vw,29px); --hero-h1: clamp(24px,2.7vw,34px); --section-pad: clamp(30px,4vw,44px); --hero-gap: clamp(12px,1.3vw,16px); --hero-pt: 44px; --hero-pb: 28px; --cta-h2: clamp(24px,2.9vw,29px); --nav-h: 42px; --nav-pad: 5px; } } /* ===== base ===== */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--font);color:var(--fg);background:var(--page-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;line-height:1.5;transition:background-color .35s ease,color .35s ease} html.theme-anim, html.theme-anim *{transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease !important} a{color:inherit;text-decoration:none} img,svg{display:block} ::selection{background:rgba(227,82,39,.35);color:#fff} :focus-visible{outline:2px solid var(--primary-2);outline-offset:3px;border-radius:6px} /* icones / logos */ .ic{display:inline-flex;align-items:center;justify-content:center} .ic svg{width:100%;height:100%;display:block} [data-logo] svg{display:block;height:100%;width:auto} .ic-box{flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:rgba(227,82,39,.14);color:var(--primary-2)} /* layout */ .wrap{position:relative;z-index:3} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} section{position:relative} .pad{padding-block:var(--section-pad)} .eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-2)} h1,h2,h3{text-wrap:balance;line-height:1.05;font-weight:700;letter-spacing:-.01em} h1{font-size:var(--h1)} h2{font-size:var(--h2)} .lead{color:var(--muted);font-size:var(--lead-size);line-height:1.6} .accent{color:var(--primary)} .center{text-align:center} .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* botao : padding/gap em EM para a CAIXA encolher junto com o texto nos degraus */ .btn{display:inline-flex;align-items:center;gap:0.6em;font:inherit;font-weight:700;font-size:0.9375rem;padding:0.9333em 1.7333em;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.2s} .btn.primary{background:linear-gradient(140deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 10px 30px rgba(227,82,39,.36)} .btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(227,82,39,.5)} .btn.ghost{background:rgba(255,255,255,.04);border-color:var(--hair-strong);color:var(--fg);backdrop-filter:blur(10px)} .btn.ghost:hover{border-color:var(--primary);background:rgba(227,82,39,.10);color:var(--primary-2)} .btn .ic{width:18px;height:18px} .chip{display:inline-flex;align-items:center;gap:0.6154em;padding:0.6154em 1.1538em;border-radius:999px;font-size:0.8125rem;font-weight:700;background:rgba(227,82,39,.13);border:1px solid rgba(227,82,39,.32);color:var(--primary-2)} .chip .ic{width:16px;height:16px;color:var(--primary-2)} .ctas{display:flex;gap:1em;flex-wrap:wrap} /* ===== nav ===== */ header.nav{position:fixed;top:16px;left:0;right:0;z-index:50;transition:.3s;pointer-events:none} /* MESMA barra da landing, nao uma parecida. Era `flex` + `space-between` + `gap:24px` com um `` no meio do markup, o que jogava os links todos no canto esquerdo e deixava um vao morto no centro. A landing usa GRID de tres colunas (`auto | 1fr | auto`) e distribui os links dentro da coluna do meio com `space-evenly`, que e o que preenche a barra. Padding tambem igualado (`--nav-pad`, com o dobro na esquerda para a logo respirar). */ .nav .container{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0;max-width:min(1120px,94vw);height:var(--nav-h);padding:0 var(--nav-pad) 0 calc(var(--nav-pad) * 2);background:linear-gradient(180deg,rgba(42,38,34,.6),rgba(28,25,23,.5));backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,background .3s,box-shadow .3s} .nav.scrolled .container{background:linear-gradient(180deg,rgba(30,27,24,.84),rgba(22,20,18,.8));box-shadow:0 14px 40px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06)} .nav.nav-hide .container{transform:translateY(-170%);opacity:0;pointer-events:none} .logo-link{display:flex;align-items:center;height:34px} .logo-link [data-logo]{height:34px} :root[data-theme="light"] .logo-link,:root[data-theme="light"] .foot-smi{color:#232120} :root[data-theme="light"] [data-logo="intellifix"] svg [fill="#F1F3F4"],:root[data-theme="light"] [data-logo="smi"] svg [fill="#F1F3F4"]{fill:#232120} .nav-links{width:100%;display:flex;align-items:center;justify-content:space-evenly;gap:0;padding:0} /* padding em `em` (nao px) e o sublinhado recuado na mesma medida: e o que a landing faz, entao os alvos crescem junto com a fonte em vez de descolar nos degraus de densidade */ .nav-links a{position:relative;display:inline-flex;align-items:center;color:var(--muted);font-size:0.9062rem;font-weight:600;transition:color .18s;padding:0.55em 0.85em;letter-spacing:.01em} .nav-links a::after{content:"";position:absolute;left:0.85em;right:0.85em;bottom:0.1em;height:2px;border-radius:2px;background:var(--primary-2);transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.4,0,.2,1)} .nav-links a:hover{color:var(--fg)} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)} .nav-links a.active{color:var(--fg)} .nav-actions{display:flex;align-items:center;justify-self:end;gap:0.45em} .nav-actions .btn{min-width:9.4286em;justify-content:center;padding:0.5714em 1.2857em;font-size:0.875rem} .nav-actions .btn.ghost{background:rgba(255,255,255,.05);border-color:var(--hair-strong);color:var(--fg)} .nav-actions .btn.ghost:hover{border-color:var(--primary);background:rgba(227,82,39,.10);color:var(--primary-2)} .nav .btn.primary{box-shadow:0 6px 18px rgba(227,82,39,.28)} .nav .btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(227,82,39,.42)} /* ===== Dropdown de capacidades na barra ===== Replica do dropdown da landing (public/index.html): mesmas classes, mesma geometria, mesmo comportamento. Abre no hover E no foco (:focus-within), entao funciona no teclado. O popover tem padding-top no lugar de um offset para nao existir "vao morto" entre o link e o menu, que e o motivo classico de menu que fecha sozinho. Adicao propria destas paginas: .capmenu-item.active marca a capacidade que o usuario ja esta lendo (na landing nenhum item e o atual). */ .capmenu{position:relative;display:inline-flex} .capmenu-pop{position:absolute;top:100%;left:50%;translate:-50% 0;padding-top:10px; display:grid;grid-template-columns:1fr 1fr;gap:2px;width:max-content;min-width:22em; opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s} .capmenu:hover .capmenu-pop,.capmenu:focus-within .capmenu-pop{opacity:1;visibility:visible;transform:translateY(0)} .capmenu-pop::before{content:"";position:absolute;inset:10px 0 0;border-radius:16px; /* valor proprio e nao `--glass-strong` (72%): num MENU o fundo tem que ser opaco o bastante para o texto da pagina nao atravessar a lista. O blur soma, mas nao pode ser o responsavel pela legibilidade. */ background:#1b1918;border:1px solid var(--hair-strong);box-shadow:var(--shadow),var(--sheen);z-index:-1} .capmenu-item{display:flex;align-items:center;gap:0.55em;padding:0.5em 0.7em;border-radius:10px; font-size:0.8125rem;color:var(--fg);white-space:nowrap;transition:background .15s} .capmenu-item:first-of-type{margin-top:10px} .capmenu-item .ic{width:1.15em;height:1.15em;flex:0 0 auto;color:var(--primary-2)} .capmenu-item .s{font-size:0.6875rem;color:var(--muted-2);letter-spacing:.04em} .capmenu-item:hover{background:rgba(227,82,39,.12)} .capmenu-item.active{background:rgba(227,82,39,.16);color:var(--primary-2);font-weight:700} .capmenu-item.active .s{color:var(--primary-2)} .capmenu-all{grid-column:1 / -1;margin:2px 0 10px;padding:0.55em 0.7em;border-top:1px solid var(--hair); font-size:0.75rem;font-weight:700;color:var(--primary-2)} @media(max-width:900px){.capmenu-pop{grid-template-columns:1fr;min-width:15em}} @media(max-width:860px){.nav-links,.nav-actions .btn.ghost{display:none}} /* ============================================================================= CATÁLOGO : herói, busca, filtros, grade de capacidades ============================================================================= */ /* herói curto: a página é a lista, não o discurso */ .cat-hero{padding-top:calc(var(--hero-pt) * .78 + var(--nav-h));padding-bottom:0} /* largura em rem, não em ch: ch aqui é medido na fonte do container (pequena), então 72ch dava ~500px e o h1 do herói quebrava em 3 linhas em pt-BR */ /* UMA coluna. A versao de duas colunas (titulo a esquerda, lead a direita) foi reprovada: descricao ao lado do titulo, em vez de abaixo dele, e o mesmo erro de leitura em qualquer largura. O ganho de altura nao paga a hierarquia quebrada. Os wrappers `cat-hero-title` / `cat-hero-aside` continuam no markup e empilham. */ .cat-hero .inner{max-width:min(96rem,94vw);display:grid;grid-template-columns:1fr;align-items:start;row-gap:calc(var(--hero-gap) * .5)} /* Breadcrumb do catalogo. As mesmas regras vivem em `capability.css` (paginas internas), e o catalogo NAO carrega aquele arquivo, entao a copia aqui e proposital: duas folhas independentes de proposito, para duas pessoas mexerem sem conflito. Se mudar o desenho do breadcrumb, mudar nos dois. */ .cap-crumb{display:flex;align-items:center;gap:0.5em;font-size:0.75rem;color:var(--muted-2);margin-bottom:0.9em} .cap-crumb a{color:var(--muted);font-weight:600;transition:color .16s} .cap-crumb a:hover{color:var(--primary-2)} .cap-crumb .ic{width:12px;height:12px;flex:0 0 auto;opacity:.7;transform:rotate(-90deg)} .cap-crumb strong{color:var(--fg);font-weight:700} .cat-hero-title{display:flex;flex-direction:column;gap:calc(var(--hero-gap) * .45);min-width:0} .cat-hero-aside{display:flex;flex-direction:column;gap:0.7em;min-width:0;padding-bottom:0} .cat-hero-hint{color:var(--muted-2);font-size:0.8125rem;letter-spacing:.01em} @media(max-width:1100px){ .cat-hero .inner{grid-template-columns:1fr;align-items:start} .cat-hero-aside{padding-bottom:0} } .cat-hero h1{font-size:var(--hero-h1);line-height:1.12} .cat-hero h1{max-width:32ch} /* ch medido na fonte do h1, não do container */ /* a descricao usa a largura toda do heroi. O `46ch` era resto da versao em duas colunas e, com uma coluna, virava uma tira estreita quebrada em 4 linhas com meia tela vazia */ .cat-hero .lead{max-width:none} /* ============================================================================= EXPLORADOR : trilha com as 9 capacidades + palco da capacidade selecionada Por que não é grade de card: a home já abre com uma grade de módulos, e repetir o mesmo objeto aqui não explica nada. A trilha lista TODAS as capacidades agrupadas por área da operação, e o palco dá a introdução visual de uma por vez, com um campo de ilustração reservado para animação curta (ver .exp-illo-anim e window.CAP_ANIM no index.html). ============================================================================= */ .cat-explorer{padding-top:clamp(20px,2.2vw,32px);padding-bottom:0} .exp-intro{display:flex;align-items:center;gap:1em;flex-wrap:wrap;margin-bottom:clamp(16px,1.8vw,26px)} .exp-intro p{flex:1 1 24em;min-width:0;color:var(--muted);font-size:0.9375rem;line-height:1.55} .exp-count{flex:0 0 auto;padding:0.5em 1em;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--muted);font-size:0.8125rem;font-weight:600;white-space:nowrap} .exp-body{display:grid;grid-template-columns:minmax(16em,21em) 1fr;gap:clamp(20px,2.6vw,38px);align-items:start} /* ---- trilha (todas as capacidades, agrupadas por área) ---- */ .exp-rail{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:1.15em;min-width:0} /* A busca copia o SearchBox canonico do produto (`packages/ui/src/components/search-box.tsx`, que por sua vez veio dos estados `.search` do Felixivel). Tres coisas que eu tinha errado e o Hill apontou: 1. FORMATO e pilula (`rounded-full`), nao retangulo de raio 12. 2. A lupa fica a DIREITA, e nao a esquerda. 3. A lupa e CINZA e so vira laranja no foco; e a borda no foco FORTALECE, nao vira laranja (o produto usa `focus-visible:border-border-strong`, sem anel). O contorno especular tambem e diferente do composer: ele segue o PONTEIRO (`--spec-angle` escrito no pointermove pelo JS da pagina), em vez de girar em loop. */ @property --spec-angle{syntax:'';inherits:false;initial-value:-90deg} .exp-search{position:relative;display:flex;align-items:center;gap:0.7em;min-width:0;height:3em;padding:0 1.15em;border-radius:999px;border:1px solid var(--hair);background:var(--field);font-size:0.875rem;transition:border-color .2s} .exp-search::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px; background:conic-gradient(from var(--spec-angle,-90deg) at 50% 50%,var(--spec-hi,rgba(255,255,255,.3)) 0deg,transparent 60deg,transparent 300deg,var(--spec-hi,rgba(255,255,255,.3)) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .25s ease; } .exp-search:hover::before,.exp-search:focus-within::before{opacity:1} /* foco: a borda FORTALECE. Nao fica primary e nao ganha anel (padrao do produto). */ .exp-search:focus-within{border-color:var(--hair-strong)} /* a lupa vem DEPOIS do input no DOM e some do fluxo: fica ancorada a direita */ .exp-search .ic{position:absolute;right:1.15em;top:50%;transform:translateY(-50%);width:16px;height:16px;flex:0 0 auto;pointer-events:none;color:var(--muted);transition:color .18s} .exp-search:focus-within .ic{color:var(--primary)} .exp-search input{flex:1 1 auto;min-width:0;padding-right:1.6em;border:0;background:none;color:var(--fg);font:inherit;font-weight:500} .exp-search input:focus,.exp-search input:focus-visible{outline:none} .exp-search input::placeholder{color:var(--muted-2)} .exp-search input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.45;cursor:pointer} .exp-groups{display:flex;flex-direction:column;gap:1.15em} .exp-group{display:flex;flex-direction:column;gap:0.3em} .exp-group[hidden]{display:none} .exp-glabel{display:flex;align-items:center;gap:0.8em;padding:0 0.15em 0.35em} .exp-glabel span{font-size:0.6562rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .exp-glabel i{flex:1 1 auto;height:1px;background:var(--hair)} .exp-items{display:flex;flex-direction:column;gap:0.15em;min-width:0} .exp-item{position:relative;display:flex;align-items:center;gap:0.75em;padding:0.65em 0.9em;border-radius:12px;border:1px solid transparent;background:none;color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:background .18s,color .18s,border-color .18s} .exp-item[hidden]{display:none} .exp-item .ic{width:1.0625rem;height:1.0625rem;flex:0 0 auto;color:var(--muted);transition:color .18s} .exp-item .j{flex:1 1 auto;min-width:0;font-size:0.9062rem;font-weight:600} .exp-item .s{flex:0 0 auto;font-size:0.6875rem;font-weight:700;letter-spacing:.05em;color:var(--muted-2)} .exp-item::after{content:"";flex:0 0 auto;width:0.4em;height:0.4em;margin-left:-0.3em;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;rotate:45deg;opacity:0;translate:-4px 0;transition:opacity .18s,translate .18s} .exp-item:hover::after,.exp-item[aria-current="true"]::after{opacity:.55;translate:0 0} .exp-item:hover{background:rgba(255,255,255,.05);color:var(--fg)} .exp-item:hover .ic{color:var(--primary-2)} .exp-item[aria-current="true"]{background:rgba(255,255,255,.07);color:var(--fg)} .exp-item[aria-current="true"] .j{font-weight:700} .exp-item[aria-current="true"] .ic{color:var(--primary-2)} /* indicador: barra reta, não borda de canto arredondado */ /* SEM barra laranja a esquerda do item selecionado. E o padrao de card do Intellifix (nada de stripe colorida) e o Hill nao quer esse vicio na interface. A selecao ja se le por tres sinais que sobraram: fundo mais claro, texto em peso 700 e o icone em `--primary-2`, mais a seta que aparece a direita. */ .exp-none{padding:1.1em 1em;border-radius:12px;border:1px dashed var(--hair-strong);background:rgba(255,255,255,.02);color:var(--muted);font-size:0.8125rem;line-height:1.5} .exp-none[hidden]{display:none} /* ---- palco: a capacidade selecionada ---- */ .exp-stage{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);min-width:0} /* campo de ilustração: aqui entra a animação de cada capacidade */ .exp-illo[hidden]{display:none} .exp-illo{position:relative;overflow:hidden;display:grid;place-items:center;height:clamp(200px,24vw,340px);border-radius:var(--radius-lg);border:1px solid var(--hair);background:var(--ground-2)} .exp-illo-glow{position:absolute;width:58%;height:104%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,82,39,.30),rgba(227,82,39,0) 72%);filter:blur(38px)} .exp-illo-lines{position:absolute;inset:-25%;background:repeating-linear-gradient(115deg,rgba(240,130,78,.13) 0 1px,rgba(240,130,78,0) 1px 52px)} .exp-illo-mark{position:relative;width:clamp(64px,8vw,104px);height:clamp(64px,8vw,104px);color:var(--primary-2);opacity:.55;transition:opacity .3s} .exp-illo-mark .ic{width:100%;height:100%} .exp-illo-code{position:absolute;top:1em;right:1em;padding:0.45em 0.8em;border-radius:8px;border:1px solid var(--hair-strong);background:rgba(255,255,255,.07);color:var(--fg);font-size:0.7188rem;font-weight:700;letter-spacing:.06em} /* slot da animação: quando existe, o desenho padrão sai de cena */ .exp-illo-anim{position:absolute;inset:0} .exp-illo-anim[hidden]{display:none} .exp-illo.has-anim .exp-illo-mark,.exp-illo.has-anim .exp-illo-lines{display:none} /* marca d'água do código: dá profundidade ao campo enquanto a animação não existe */ .exp-illo-wm{position:absolute;left:0.7em;bottom:0.1em;font-size:clamp(4rem,8vw,7.5rem);font-weight:700;letter-spacing:-.04em;line-height:.8;color:var(--fg);opacity:.045;user-select:none;pointer-events:none} /* navegação entre capacidades, dentro do próprio campo */ .exp-nav-btn{width:2.2em;height:2.2em;display:grid;place-items:center;border-radius:999px;border:1px solid var(--hair-strong);background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;transition:.18s;backdrop-filter:blur(10px)} .exp-nav-btn:hover{color:var(--primary-2);border-color:var(--primary);background:rgba(227,82,39,.12)} .exp-nav-btn .ic{width:0.9em;height:0.9em} #exp-prev .ic{rotate:90deg} #exp-next .ic{rotate:-90deg} /* contagem por grupo na trilha (respeita a busca) */ .exp-gcount{flex:0 0 auto;font-size:0.625rem;font-weight:700;color:var(--muted-2);opacity:.75} /* ---- topo da trilha: título + contagem, no lugar do parágrafo de introdução ---- */ .exp-rail-head{display:flex;align-items:baseline;gap:0.8em;flex-wrap:wrap;padding:0 0.15em} .exp-rail-title{font-size:0.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg)} .exp-rail-head .exp-count{padding:0;border:0;background:none;color:var(--muted-2);font-size:0.75rem;font-weight:500} /* ---- moldura de janela com a tela real do produto ---- */ .exp-frame{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hair-strong);background:#181615;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)} .exp-frame[hidden]{display:none} .exp-chrome{display:flex;align-items:center;gap:0.8em;padding:0.7em 1em;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)} .exp-dots{display:flex;gap:0.4em;flex:0 0 auto} .exp-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15)} .exp-chrome-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.75rem;font-weight:600;color:var(--muted)} .exp-chrome-tag{margin-left:auto;flex:0 0 auto;padding:0.35em 0.7em;border-radius:7px;border:1px solid rgba(227,82,39,.3);background:rgba(227,82,39,.12);color:var(--primary-2);font-size:0.6875rem;font-weight:700;letter-spacing:.02em} .exp-shot{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top center} .exp-shot-light{display:none} :root[data-theme="light"] .exp-shot-dark{display:none} :root[data-theme="light"] .exp-shot-light{display:block} :root[data-theme="light"] .exp-frame{background:var(--ground-2);border-color:rgba(35,33,32,.14);box-shadow:0 24px 60px rgba(35,33,32,.16),inset 0 1px 0 rgba(255,255,255,.6)} :root[data-theme="light"] .exp-chrome{background:rgba(35,33,32,.03);border-bottom-color:rgba(35,33,32,.1)} :root[data-theme="light"] .exp-dots i{background:rgba(35,33,32,.16)} .exp-frame-nav{position:absolute;right:1em;bottom:1em;display:flex;gap:0.4em} /* ---- tiras das telas reais ---- */ .exp-thumbs{display:flex;gap:0.6em;flex-wrap:wrap} .exp-thumbs[hidden]{display:none} .exp-thumb{display:flex;align-items:center;gap:0.7em;padding:0.4em 0.9em 0.4em 0.4em;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.03);color:var(--muted);font:inherit;font-size:0.8125rem;font-weight:600;cursor:pointer;transition:.18s} .exp-thumb img{width:64px;height:40px;object-fit:cover;object-position:top center;border-radius:6px;border:1px solid var(--hair)} .exp-thumb .exp-thumb-light{display:none} :root[data-theme="light"] .exp-thumb .exp-thumb-dark{display:none} :root[data-theme="light"] .exp-thumb .exp-thumb-light{display:block} .exp-thumb:hover{color:var(--fg);border-color:var(--hair-strong)} .exp-thumb[aria-pressed="true"]{border-color:rgba(227,82,39,.5);background:rgba(227,82,39,.09);color:var(--fg)} :root[data-theme="light"] .exp-thumb{background:rgba(35,33,32,.03)} /* ---- ações do palco ---- */ .exp-ctas{margin-left:auto;display:flex;gap:0.6em;flex-wrap:wrap} .exp-demo{font-size:0.875rem;padding:0.8em 1.3em} .exp-info{display:flex;flex-direction:column;gap:0.8em;min-width:0} .exp-name{font-size:clamp(1.5rem,2.3vw,2.125rem);line-height:1.14;letter-spacing:-.012em} .exp-problem{font-size:1.0625rem;line-height:1.5;color:var(--fg)} .exp-desc{font-size:0.9375rem;line-height:1.6;color:var(--muted)} .exp-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:0.9em 2em;margin-top:0.4em;list-style:none} .exp-terms li{display:flex;gap:0.7em;padding-top:0.8em;border-top:1px solid var(--hair);font-size:0.875rem;line-height:1.45;color:var(--fg)} .exp-terms li::before{content:"";flex:0 0 auto;width:0.42em;height:0.72em;margin-top:0.32em;border-right:2px solid var(--primary-2);border-bottom:2px solid var(--primary-2);rotate:45deg} .exp-foot{display:flex;align-items:center;gap:0.9em;flex-wrap:wrap;margin-top:0.3em;padding-top:1.05em;border-top:1px solid var(--hair)} .exp-dep{display:flex;align-items:center;gap:0.5em;min-width:0;color:var(--muted);font-size:0.8125rem} .exp-dep .ic{width:15px;height:15px;flex:0 0 auto;color:var(--muted-2)} .exp-vsep{width:1px;height:1.2em;background:var(--hair)} .exp-areas{display:flex;gap:0.4em;flex-wrap:wrap} .exp-area{padding:0.35em 0.75em;border-radius:999px;border:1px solid var(--hair);color:var(--muted-2);font-size:0.6875rem;font-weight:600;white-space:nowrap} .exp-open{margin-left:auto;font-size:0.875rem;padding:0.8em 1.4em} .exp-open .ic{width:14px;height:14px;rotate:-90deg} /* tela estreita: a trilha deixa de ser coluna e vira fileira de pílulas */ @media(max-width:980px){ .exp-body{grid-template-columns:1fr} .exp-rail{position:static} .exp-items{flex-direction:row;flex-wrap:wrap;gap:0.4em} .exp-item{border-color:var(--hair);border-radius:999px;padding:0.5em 0.9em} .exp-item[aria-current="true"]{border-color:rgba(227,82,39,.45);color:var(--primary-2)} .exp-ctas{margin-left:0;width:100%} .exp-ctas .btn{flex:1 1 12em;justify-content:center} } /* ============================================================================= CARDS DE CAPACIDADE : usados pelas PÁGINAS INTERNAS (integrações e relacionadas), não pelo catálogo. O catálogo virou explorador (trilha + palco) e não tem mais grade de card, mas /capabilities// carrega esta folha e depende destas regras. Não remover junto com o catálogo antigo. ============================================================================= */ /* grade */ .cat-grid{margin-top:clamp(26px,3vw,42px);display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(250px,20vw,300px),1fr));gap:0.875rem} .cat-grid[hidden]{display:none} /* card de capacidade */ /* [hidden] precisa vencer o display:flex da classe (a folha do UA perde do autor) */ .cap-card[hidden]{display:none} .cap-card{position:relative;display:flex;flex-direction:column;gap:0.7rem;padding:1.15rem;border-radius:var(--radius);border:1px solid var(--hair);background:rgba(255,255,255,.04);transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .2s,background .2s} .cap-card:hover,.cap-card:focus-within{border-color:rgba(227,82,39,.4);background:rgba(227,82,39,.06);transform:translateY(-3px)} /* o link cobre o card inteiro; só as pílulas de área ficam acima dele */ .cap-hit{position:absolute;inset:0;z-index:1;border-radius:inherit} .cap-top{display:flex;align-items:center;justify-content:space-between;gap:0.6rem} .cap-card .ic-box{width:38px;height:38px;border-radius:11px;transition:transform .25s,background .25s} .cap-card .ic-box .ic{width:20px;height:20px} .cap-card:hover .ic-box{background:rgba(227,82,39,.26);transform:translateY(-2px) scale(1.07)} .cap-code{flex:0 0 auto;padding:0.3077em 0.6923em;border-radius:7px;background:rgba(255,255,255,.06);color:var(--muted);font-size:0.6875rem;font-weight:700;letter-spacing:.05em} .cap-card:hover .cap-code{color:var(--primary-2);background:rgba(227,82,39,.16)} .cap-name{font-size:1rem;font-weight:700;line-height:1.2} .cap-problem{font-size:0.8125rem;line-height:1.45;color:var(--fg)} .cap-problem b{display:block;font-size:0.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:0.25rem} .cap-desc{font-size:0.8125rem;line-height:1.45;color:var(--muted)} .cap-areas{position:relative;z-index:2;display:flex;gap:0.4em;flex-wrap:wrap;margin-top:auto} .cap-area{padding:0.3077em 0.6923em;border-radius:999px;border:1px solid var(--hair);background:none;color:var(--muted-2);font:inherit;font-size:0.6875rem;font-weight:600;cursor:pointer;transition:.16s} .cap-area:hover{color:var(--primary-2);border-color:rgba(227,82,39,.42)} .cap-foot{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding-top:0.7rem;border-top:1px solid var(--hair)} .cap-dep{display:flex;align-items:center;gap:0.5em;min-width:0;color:var(--muted);font-size:0.75rem;line-height:1.35} .cap-dep .ic{width:14px;height:14px;flex:0 0 auto;color:var(--muted-2)} .cap-dep span{min-width:0} .cap-go{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:var(--muted-2);transition:.2s} .cap-go .ic{width:14px;height:14px} .cap-card:hover .cap-go{color:var(--primary-2);background:rgba(227,82,39,.16);transform:translateX(2px)} /* ===== como a ativação funciona ===== */ .cat-activation{margin-top:clamp(52px,6.5vw,96px)} .act-head{display:flex;flex-direction:column;gap:0.7em;max-width:52rem} .act-head h2{font-size:var(--h2)} .act-steps{list-style:none;margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(18px,2.4vw,34px);counter-reset:act} .act-step{position:relative;display:flex;flex-direction:column;gap:0.55em;padding-top:1.15em;border-top:1px solid var(--hair)} .act-step h3{font-size:1.0625rem;font-weight:700} .act-step p{color:var(--muted);font-size:0.875rem;line-height:1.55} .act-num{position:absolute;top:-0.85em;left:0;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:999px;background:var(--page-bg);border:1px solid rgba(227,82,39,.55);color:var(--primary-2);font-size:0.75rem;font-weight:700} .act-step:first-child{border-top-color:rgba(227,82,39,.5)} /* bloco de crescimento do catálogo */ .cat-grow{margin-top:clamp(48px,6vw,90px)} .cat-grow .box{padding:clamp(30px,4vw,54px);border-radius:var(--radius-lg);border:1px solid rgba(227,82,39,.32);background:rgba(227,82,39,.06);display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center} .cat-grow h2{font-size:var(--h2);max-width:26ch} .cat-grow .lead{max-width:64ch} .cat-grow .ctas{margin-top:0.6rem;justify-content:center} /* ===== footer (mesma cor da nav, opaco de propósito) ===== SEM backdrop-filter: o seletor de idioma e o toggle de tema sao filhos deste footer e usam position:fixed. Um backdrop-filter faria o footer virar containing block deles e os dois sairiam do canto superior da tela. */ footer{border-top:1px solid rgba(255,255,255,.12);padding-block:64px 40px;position:relative;z-index:3;background:linear-gradient(180deg,#272421,#201d1c);margin-top:var(--section-pad)} .foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap} .foot-brand{max-width:320px;display:flex;flex-direction:column;gap:16px} .foot-brand .blogo{height:26px} .foot-brand .tag{font-size:0.8125rem;color:#868586;line-height:1.55} .foot-cols{display:flex;gap:64px;flex-wrap:wrap} .foot-col h4{font-size:0.8125rem;font-weight:700;color:#f1f3f4;margin-bottom:14px} .foot-col a{display:block;color:#868586;font-size:0.875rem;padding:5px 0;transition:.15s} /* 🚨 `[hidden]` PRECISA vencer o `display:block` acima, e não vence sozinho. A regra do user-agent é `[hidden]{display:none}` (especificidade 0,1,0) e `.foot-col a` é (0,1,1) — então todo link marcado `hidden` no rodapé aparecia normalmente. O caso real: o link "Security", desativado junto com a seção `#security` da landing (que hoje só existe dentro de comentário HTML), ficava VISÍVEL em 11 páginas e levava a uma âncora inexistente. */ .foot-col a[hidden]{display:none} .foot-col a:hover{color:#f1f3f4} .foot-col .foot-soon{display:flex;align-items:center;gap:8px;color:#868586;font-size:0.875rem;padding:5px 0;opacity:.6;cursor:default} .foot-col .foot-soon em{font-style:normal;font-size:0.6562rem;letter-spacing:.03em;border:1px solid var(--hair);padding:1px 7px;border-radius:999px;white-space:nowrap} .foot-base{margin-top:40px;padding-top:24px;border-top:1px solid rgba(241,243,244,.24);display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 24px;color:#868586;font-size:0.8125rem} .foot-base .foot-base-info{display:flex;flex-direction:column;align-items:flex-start;gap:10px} @media(max-width:640px){.foot-base{flex-direction:column;align-items:center;text-align:center}.foot-base .foot-base-info{align-items:center}} .foot-base .foot-smi{display:inline-flex;align-items:center;height:26px} .foot-base .foot-smi [data-logo]{height:26px} /* ===== seletor de idioma ===== */ .lang-switcher{--lang-primary:#E35227;--lang-primary-2:#F0824E;--lang-fg:#f1f3f4;--lang-hair:rgba(255,255,255,.12);--lang-hair-strong:rgba(255,255,255,.18);position:fixed;top:18px;right:20px;display:inline-block;z-index:70} .lang-switcher,#theme-toggle{opacity:.5;transition:opacity .22s ease} .lang-switcher:hover,.lang-switcher:focus-within,#theme-toggle:hover,#theme-toggle:focus-visible{opacity:1} .lang-trigger{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--lang-hair-strong);background:rgba(255,255,255,.06);color:var(--lang-fg);font:600 13px/1 var(--font);letter-spacing:.01em;cursor:pointer;backdrop-filter:blur(20px) saturate(1.6);transition:background .18s,border-color .18s} .lang-trigger:hover{background:rgba(255,255,255,.12)} .lang-trigger:focus-visible{outline:2px solid var(--lang-primary-2);outline-offset:2px} .lang-globe{width:16px;height:16px;opacity:.8;flex:0 0 auto} .lang-current{font-weight:600;letter-spacing:.02em} .lang-caret{width:14px;height:14px;opacity:.6;flex:0 0 auto;transition:transform .2s ease} .lang-trigger[aria-expanded="true"] .lang-caret{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:184px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;border:1px solid var(--lang-hair);background:rgba(28,26,25,.94);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);transform-origin:top right;animation:lang-pop .16s cubic-bezier(.2,.7,.2,1)} .lang-menu[hidden]{display:none} @keyframes lang-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}} .lang-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:38px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--lang-fg);font:500 13.5px/1 var(--font);text-align:left;cursor:pointer;transition:background .14s} .lang-item:hover{background:rgba(255,255,255,.06)} .lang-item:focus-visible{outline:none;background:rgba(255,255,255,.09)} .lang-item[aria-checked="true"]{font-weight:600} .lang-check{width:16px;height:16px;color:var(--lang-primary);opacity:0;flex:0 0 auto} .lang-item[aria-checked="true"] .lang-check{opacity:1} @media(prefers-reduced-motion:reduce){.lang-menu{animation:none}.lang-caret{transition:none}} /* ===== toggle de tema (mesmo raio/borda/blur do seletor de idioma) ===== */ #theme-toggle{position:fixed;top:18px;right:138px;z-index:70;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--lang-hair-strong,rgba(255,255,255,.18));background:rgba(255,255,255,.06);color:var(--lang-fg,#f1f3f4);cursor:pointer;backdrop-filter:blur(20px) saturate(1.6);transition:background .18s,border-color .18s} #theme-toggle:hover{background:rgba(255,255,255,.12)} #theme-toggle:focus-visible{outline:2px solid var(--lang-primary-2,#F0824E);outline-offset:2px} .theme-ico{position:absolute;display:inline-flex;width:17px;height:17px;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)} .theme-ico svg{width:100%;height:100%;display:block} .theme-ico-sun{opacity:1;transform:none} .theme-ico-moon{opacity:0;transform:rotate(-90deg) scale(.6)} :root[data-theme="light"] .theme-ico-sun{opacity:0;transform:rotate(90deg) scale(.6)} :root[data-theme="light"] .theme-ico-moon{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.theme-ico{transition:opacity .15s ease}} /* ===== IDIOMA E TEMA SAEM DA FAIXA DA NAV QUANDO NÃO CABEM ===== `.lang-switcher` (right:20) e `#theme-toggle` (posicionado por JS à esquerda dela) são `position:fixed` no topo e ocupam ~184px do canto direito. A pílula da nav é centrada e vai até `min(1120px,94vw)`, então a partir de certa largura os três dividem a mesma faixa: medido a 1280, a borda direita da pílula caía em 1200 e o toggle começava em 1097, com o CTA por baixo do seletor de idioma. Acontecia em toda largura abaixo de ~1520px, no site inteiro. Estreitar a pílula NÃO resolve: a 900px uma reserva de 420px deixava 480px de pílula e a nav transbordava. Então quem sai da faixa são os controles: descem para logo abaixo da barra, onde não disputam espaço com nada. Acima de 1520 nada muda. Abaixo de 861 na landing o JS move os dois para dentro do drawer, e aí a regra é inofensiva. ATENÇÃO À ORDEM: `.lang-switcher{top:18px}` e `#theme-toggle{top:18px}` são declarados mais abaixo neste arquivo. Como a especificidade é a mesma, esta media query só ganha se vier DEPOIS deles. Foi exatamente o bug do `html{font-size}` contra as media queries de altura. Não mover para cima. */ @media(max-width:1519px){ .lang-switcher,#theme-toggle{top:calc(var(--nav-h) + 30px)} } /* ===== LIGHT MODE : superfícies que usam fill branco cru ===== */ :root[data-theme="light"] #theme-toggle, :root[data-theme="light"] .lang-trigger{background:rgba(255,255,255,.55);border-color:rgba(35,33,32,.16);color:#232120} :root[data-theme="light"] #theme-toggle:hover, :root[data-theme="light"] .lang-trigger:hover{background:rgba(255,255,255,.85)} :root[data-theme="light"] .lang-menu{background:rgba(255,255,255,.96);border-color:rgba(35,33,32,.1);box-shadow:0 20px 50px rgba(35,33,32,.18),inset 0 1px 0 rgba(255,255,255,.7)} :root[data-theme="light"] .lang-item{color:#232120} :root[data-theme="light"] .lang-item:hover{background:rgba(35,33,32,.05)} :root[data-theme="light"] .lang-item:focus-visible{background:rgba(35,33,32,.08)} :root[data-theme="light"] .nav .container{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62));border-color:rgba(35,33,32,.1);box-shadow:0 18px 50px rgba(35,33,32,.12),inset 0 1px 0 rgba(255,255,255,.7)} :root[data-theme="light"] .nav.scrolled .container{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.82));box-shadow:0 14px 40px rgba(35,33,32,.16),inset 0 1px 0 rgba(255,255,255,.7)} :root[data-theme="light"] .btn.ghost, :root[data-theme="light"] .nav-actions .btn.ghost{background:rgba(35,33,32,.045)} :root[data-theme="light"] .cap-card{background:rgba(35,33,32,.045)} :root[data-theme="light"] .cap-card:hover, :root[data-theme="light"] .cap-card:focus-within{background:rgba(227,82,39,.07)} :root[data-theme="light"] .cap-code{background:rgba(35,33,32,.06)} :root[data-theme="light"] .exp-count, :root[data-theme="light"] .exp-search{background:rgba(35,33,32,.04)} :root[data-theme="light"]{--spec-hi:rgba(35,33,32,.42)} /* branco nao aparece em fundo claro */ :root[data-theme="light"] .exp-item:hover{background:rgba(35,33,32,.05)} :root[data-theme="light"] .exp-item[aria-current="true"]{background:rgba(227,82,39,.09)} :root[data-theme="light"] .exp-illo-glow{opacity:.55} :root[data-theme="light"] .exp-illo-lines{opacity:.7} :root[data-theme="light"] .exp-illo-code{background:rgba(35,33,32,.06)} :root[data-theme="light"] .exp-illo-wm{opacity:.06} :root[data-theme="light"] .exp-nav-btn{background:rgba(35,33,32,.05)} :root[data-theme="light"] .exp-none{background:rgba(35,33,32,.025)} :root[data-theme="light"] footer{background:linear-gradient(180deg,#fdfcfb,#fbfaf8);border-top-color:rgba(35,33,32,.1)} :root[data-theme="light"] .foot-base{border-top-color:rgba(35,33,32,.16);color:#6b6560} :root[data-theme="light"] .foot-brand .tag, :root[data-theme="light"] .foot-col a{color:#6b6560} :root[data-theme="light"] .foot-col .foot-soon{color:#6b6560} :root[data-theme="light"] .foot-col h4, :root[data-theme="light"] .foot-col a:hover{color:#232120} @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}} /* ===== responsivo ===== */ @media(max-width:560px){ .exp-illo{height:clamp(170px,44vw,220px)} .exp-terms{grid-template-columns:1fr} .exp-foot{gap:0.7em} .exp-vsep{display:none} } /* mesma folga do herói das páginas internas: abaixo de 1520 os controles de idioma e tema descem para baixo da barra e precisam de espaço livre. */ @media(max-width:1519px){ .cat-hero{padding-top:calc(var(--hero-pt) * .78 + var(--nav-h) + 34px)} }