/* ================================================================= PLANNING — páginas internas (Sobre, Soluções, Segmentos, Metodologia, Treinamentos, Blog, Cases, Contato, Trabalhe conosco e subpáginas) Carregado depois do style.css: usa os mesmos tokens, linhas tracejadas, pins, botões, FAQ e rodapé. Layout mais simples que a home: sem seções presas nem animações de scroll. ================================================================= */ /* Item do menu da página atual */ .menu .btn[aria-current="page"] { --btn-bg: var(--logo-blue); --btn-fg: #fff; } .mobile-menu__list a[aria-current="page"], .mobile-sub summary[data-current] { color: var(--blue-soft); } /* ---------- Topo da página ---------- */ .page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 64px + env(safe-area-inset-top, 0px)) 0 56px; background: radial-gradient(120% 90% at 30% 120%, #0b2b66 0%, #07142b 45%, #020409 75%, #000 100%); } .page-hero__inner { position: relative; padding-top: 24px; } .crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 28px; font: 500 13px/1.4 var(--f-label); color: var(--muted); } .crumbs a { transition: color .2s var(--ease-io-quad); } .crumbs a:hover { color: var(--off-white); } .crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(243, 243, 243, .3); } .page-hero__eyebrow { display: block; margin-bottom: 16px; color: var(--blue-soft); } .page-hero__title { max-width: 20ch; font: 700 40px/1.04 var(--f-title); letter-spacing: -1px; text-wrap: balance; } /* título em duas linhas fixas, quebra com
no HTML (Segmentos, 2026-10-29); o texto de baixo mantém 720px */ .page-hero__title--2l { max-width: none; } .page-hero--split .page-hero__grid > div:first-child:has(.page-hero__title--2l) { max-width: none; } .page-hero__grid > div:has(.page-hero__title--2l) .page-hero__lead { max-width: 720px; } .page-hero__lead { max-width: 60ch; margin-top: 20px; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .page-hero__lead + .page-hero__lead { margin-top: 12px; } .page-hero__ctas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 32px; } .page-hero__stat { display: flex; align-items: baseline; gap: 12px; margin-top: 36px; } .page-hero__stat strong { font: 700 56px/1 var(--f-title); letter-spacing: -.03em; } .page-hero__stat span { color: var(--muted); } @media (min-width: 800px) { .page-hero { padding-bottom: 88px; } .page-hero__title { font-size: clamp(52px, 5.2vw, 84px); letter-spacing: -.025em; line-height: 1; } .page-hero__lead { font-size: 19px; } .page-hero__stat strong { font-size: 80px; } } /* ---------- Seção padrão ---------- Mobile: título em cima, conteúdo embaixo. Desktop: título à esquerda (4 colunas), conteúdo à direita (7 colunas). */ .sec { background: #eceff4; padding-block: 64px; } /* Fundos extras para separar as seções com mais contraste */ .sec--tint { background: #dce5f2; } .sec--white { background: #fff; } .sec--dark { background: radial-gradient(100% 60% at 50% 0%, #0a2451 0%, #04101f 45%, #000 85%); } /* Duas seções seguidas com o MESMO fundo viram um bloco só (sem somar os dois respiros). Quando o fundo muda (cinza ↔ branco ↔ escuro), cada seção mantém o respiro de cima. */ .sec:not(.sec--white):not(.sec--dark):not(.sec--tint) + .sec:not(.sec--white):not(.sec--dark):not(.sec--tint), .sec--white + .sec--white { padding-top: 0; } .sec__grid { row-gap: 32px; } .sec__head { grid-column: 1 / -1; padding-top: 24px; } .sec__body { grid-column: 1 / -1; min-width: 0; } .sec__head .eyebrow { display: block; margin-bottom: 16px; color: var(--muted); } .sec__title { font: 700 30px/1.08 var(--f-title); letter-spacing: -.6px; text-wrap: balance; } .sec__intro { margin-top: 16px; color: var(--muted); max-width: 46ch; text-wrap: pretty; } .sec__full { grid-column: 1 / -1; min-width: 0; } @media (min-width: 800px) { .sec { padding-block: 104px; } .sec__head { grid-column: 1 / span 4; } .sec__head--wide { grid-column: 1 / span 6; } .sec__body { grid-column: 6 / span 7; padding-top: 24px; } .sec__title { font-size: 40px; letter-spacing: -1px; } } /* Texto corrido */ .prose p { font-size: 17px; line-height: 1.55; max-width: 62ch; text-wrap: pretty; } .prose p + p { margin-top: 16px; } [data-theme="light"] .prose p { color: rgba(0, 0, 0, .78); } .sub-title { margin: 40px 0 8px; font: 700 13px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--muted); } .sub-title:first-child { margin-top: 0; } /* Lista com marcador quadrado azul e separador tracejado */ .checklist li { display: flex; gap: 14px; padding: 14px 0; font-size: 17px; line-height: 1.4; background: var(--h-dash, repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px)) left bottom / 100% 1px no-repeat; } .checklist li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .5em; background: var(--blue); } .checklist--cols { display: grid; column-gap: 32px; } @media (min-width: 700px) { .checklist--cols { grid-template-columns: 1fr 1fr; } } /* Destaque (ex.: "Redução de CAPEX de 5% a 20%.") */ /* ---------- Cards ---------- */ .cards { display: grid; gap: 12px; } @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .25s var(--ease-io-quad), transform .35s var(--ease-io-circ); } .sec--white .card { background: var(--bg-light); } [data-theme="dark"] .card { background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } a.card:hover, a.card:focus-visible { box-shadow: inset 0 0 0 1px var(--blue); transform: translateY(-2px); } .card__num { font: 700 13px/1.4 var(--f-label); letter-spacing: 1.04px; color: var(--blue); font-variant-numeric: tabular-nums; } [data-theme="dark"] .card__num { color: var(--blue-soft); } .card__title { font: 700 20px/1.25 var(--f-title); letter-spacing: -.2px; text-wrap: balance; } .card__text { color: var(--muted); text-wrap: pretty; } .card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font: 500 13px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue); } [data-theme="dark"] .card__more { color: var(--blue-soft); } .card__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .35s var(--ease-io-circ); } a.card:hover .card__more svg { transform: translateX(4px); } .card__stat { font: 700 44px/1 var(--f-title); letter-spacing: -.03em; } .card__stat small { margin-left: 8px; font: 500 15px/1.3 var(--f-display); letter-spacing: 0; color: var(--muted); } /* ---------- Etapas numeradas ---------- */ .step { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .sec--white .step { background: var(--bg-light); } /* Lista numerada simples (ex.: "Como atuamos" dos cases) */ .numlist { counter-reset: n; } .numlist li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; font-size: 17px; line-height: 1.45; background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .numlist li::before { content: counter(n, decimal-leading-zero); font: 500 13px/1.9 var(--f-label); letter-spacing: 1.04px; color: var(--blue); } /* ---------- Números ---------- */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 1000px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stat-box { padding: 24px 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .sec--white .stat-box { background: var(--bg-light); } [data-theme="dark"] .stat-box { background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } /* Número nunca quebra no meio ("+2.000", "46% → 94%"): a fonte diminui com a largura */ .stat-box strong { display: block; font: 700 clamp(24px, 2.6vw, 44px)/1.05 var(--f-title); letter-spacing: -.02em; white-space: nowrap; } .stat-box span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; } .note { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--blue); font-size: 17px; max-width: 62ch; } /* ---------- Chips (links curtos: segmentos, outras soluções) ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; background: var(--glass-bg); color: var(--fg); font: 500 14px/1.3 var(--f-display); transition: background-color .25s var(--ease-io-quad), color .25s var(--ease-io-quad); } a.chip:hover, a.chip:focus-visible { background: var(--logo-blue); color: #fff; } .chip[aria-current="page"] { background: var(--logo-blue); color: #fff; } /* ---------- Próximo (framework / navegação) ---------- */ /* ---------- Pessoas / endereços ---------- */ .places { display: grid; gap: 12px; } @media (min-width: 900px) { .places { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .place { padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .sec--white .place { background: var(--bg-light); } .place .eyebrow { display: block; color: var(--blue); } .place h3 { margin: 10px 0 12px; font: 700 22px/1.2 var(--f-title); } .place p { color: var(--muted); font-size: 15px; line-height: 1.5; } .cta-band { padding-block: 88px; background: radial-gradient(120% 90% at 30% 120%, #0b2b66 0%, #07142b 55%, #000 100%); } .cta-band__inner { padding-top: 24px; } .cta-band__title { max-width: 22ch; font: 700 32px/1.06 var(--f-title); letter-spacing: -.8px; text-wrap: balance; } .cta-band__text { max-width: 52ch; margin-top: 16px; color: var(--muted); font-size: 17px; } .cta-band .page-hero__ctas { margin-top: 28px; } @media (min-width: 800px) { .cta-band { padding-block: 120px; } .cta-band__title { font-size: 52px; letter-spacing: -1.3px; } .cta-band__text { font-size: 19px; } } /* ---------- FAQ (usa o componente da home) ---------- */ .faq-list .faq-item:last-child { background-image: var(--h-dash), var(--h-dash); background-size: 100% 1px, 100% 1px; background-position: left top, left bottom; } /* ---------- Formulário de contato ---------- */ .form { display: grid; gap: 16px; } @media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .form__full { grid-column: 1 / -1; } } .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .field label { font: 500 13px/1.4 var(--f-label); letter-spacing: .6px; color: var(--muted); } .field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 12px 14px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); font: 500 16px/1.4 var(--f-display); color: var(--black); transition: box-shadow .2s var(--ease-io-quad); } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); } .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .form__legal { font-size: 13px; color: var(--muted); } .form__msg { min-height: 1.4em; font-size: 15px; color: var(--logo-blue); } .contact-direct { display: grid; gap: 20px; } .contact-direct a { font: 700 19px/1.3 var(--f-title); overflow-wrap: anywhere; transition: color .2s; } .contact-direct a:hover { color: var(--blue); } .contact-direct .eyebrow { display: block; margin-bottom: 6px; color: var(--muted); } /* ================================================================= PÁGINAS DE SOLUÇÃO COM MÉTODO (conteúdo vindo de "ABAS SITE") PCM, Grandes Paradas, Estocáveis, Planos de Manutenção, Projetos ================================================================= */ /* Topo: segmentos, destaques e atalhos para as seções */ .page-hero__seg { margin-top: 16px; font: 500 13px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue-soft); } /* Conteúdo das seções empilhado com respiro constante */ .sec__stack > * + * { margin-top: 24px; } .sec__stack > .sub-head { margin-top: 64px; } .sec__stack > .sub-head + .sub-lead { margin-top: 10px; } .sec__stack > :first-child { margin-top: 0; } @media (min-width: 800px) { .sec__full.sec__stack { padding-top: 8px; } } .sub-head { font: 700 24px/1.2 var(--f-title); letter-spacing: -.3px; text-wrap: balance; } .sub-lead { max-width: 62ch; color: var(--muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; } [data-theme="dark"] .note { color: var(--off-white); } @media (min-width: 800px) { .sub-head { font-size: 28px; } } /* Grade de cartões com 2 a 5 colunas */ .checklist--sm li { padding: 9px 0; font-size: 15px; gap: 12px; } .checklist--sm li::before { flex-basis: 5px; height: 5px; margin-top: .55em; } [data-theme="dark"] .checklist li::before { background: var(--blue-soft); } /* Lista "rótulo + descrição" (Equipe / Ferramentas / Entregáveis) */ /* Quadro de destaque ("A regra", "O diagnóstico", "Governança"...) */ /* Fluxo de dados (origem → painel → uso) */ .flow { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); } .flow__box { display: flex; flex-direction: column; gap: 6px; padding: 20px; box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .14); background: rgba(238, 238, 240, .05); } [data-theme="light"] .flow__box { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .flow__tag { font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; color: var(--blue-soft); } .flow__box strong { font: 700 18px/1.25 var(--f-title); } .flow__box span:last-child { color: var(--muted); font-size: 15px; line-height: 1.45; } .flow__arrow { justify-self: center; color: var(--blue-soft); font-size: 22px; line-height: 1; transform: rotate(90deg); } @media (min-width: 900px) { .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; } .flow__arrow { align-self: center; transform: none; } } /* Gráfico (curva da banheira) */ .figure { padding: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .sec--white .figure { background: var(--bg-light); } .figure__svg { display: block; width: 100%; height: auto; font-family: var(--f-display); } .figure figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; } @media (min-width: 1100px) { .figure { max-width: 760px; } } /* Abas das fases ("Selecione uma fase") — sem JS, todas aparecem empilhadas */ .tabs__label { margin: 22px 0 4px; font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); } /* Sem JS as abas não funcionam: esconde a barra e mostra os painéis em sequência */ /* Âncoras das seções não ficam escondidas atrás do cabeçalho */ [id] { scroll-margin-top: calc(var(--header-h) + 8px); } /* ---------- Fotos: foto com legenda e galeria com ampliação ---------- */ .gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 800px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gallery__item { position: relative; overflow: hidden; background: #0b1020; } .gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .gallery__btn img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease-out-circ), opacity .3s var(--ease-io-quad); } .gallery--portrait .gallery__btn img { aspect-ratio: 3 / 4; object-position: center 30%; } .gallery__btn:hover img, .gallery__btn:focus-visible img { transform: scale(1.04); } .gallery__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } /* Legenda (nome do cliente) sobre a foto */ .gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent); color: #fff; font: 500 11.5px/1.3 var(--f-label); letter-spacing: .6px; text-transform: uppercase; } /* Foto ampliada (abre ao clicar numa foto da galeria; js/pages.js) */ .lightbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .92); color: var(--off-white); } .lightbox[open] { display: grid; grid-template-rows: 1fr auto; } .lightbox::backdrop { background: rgba(0, 0, 0, .6); } .lightbox__fig { display: grid; place-items: center; min-height: 0; padding: 64px 16px 8px; } .lightbox__fig img { max-width: 100%; max-height: 100%; object-fit: contain; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 20px; } .lightbox__cap { font: 500 13px/1.4 var(--f-label); letter-spacing: .8px; text-transform: uppercase; } .lightbox__count { color: var(--muted-dark); font-variant-numeric: tabular-nums; } .lightbox__nav { display: flex; gap: 4px; } .lightbox__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer; background: rgba(238, 238, 240, .12); color: #fff; font-size: 20px; line-height: 1; transition: background-color .2s var(--ease-io-quad); } .lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--logo-blue); } .lightbox__close { position: absolute; top: 12px; right: 12px; } /* ================================================================= SUB-PÁGINAS ENXUTAS (piloto: solucoes/pcm.html) Menos texto, mais leitura visual: topo dividido com imagem, blocos de uma linha, passos numerados, detalhes que abrem sob demanda e espaços reservados para fotos. ================================================================= */ /* Topo dividido: texto à esquerda, imagem à direita */ .page-hero--split .page-hero__grid { display: grid; gap: 40px; } .page-hero__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #0b1020; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1000px) { .page-hero--split .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 56px; } .page-hero--split .page-hero__media { aspect-ratio: 5 / 4; } .page-hero--split .page-hero__title { font-size: clamp(48px, 4.4vw, 72px); } } /* Espaço reservado para imagem: troque o
por (instrução no comentário) */ .ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; height: 100%; min-height: 220px; padding: 24px; text-align: center; background: repeating-linear-gradient(135deg, rgba(14, 118, 255, .05) 0 12px, transparent 12px 24px), #eef1f6; box-shadow: inset 0 0 0 1px rgba(0, 74, 173, .25); color: #3e4658; } [data-theme="dark"] .ph { background: repeating-linear-gradient(135deg, rgba(153, 197, 255, .06) 0 12px, transparent 12px 24px), #0b1426; box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .25); color: rgba(243, 243, 243, .7); } .ph svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .7; } .ph strong { font: 700 15px/1.3 var(--f-title); } .ph small { font: 500 12px/1.4 var(--f-label); letter-spacing: .6px; text-transform: uppercase; opacity: .75; } .page-hero__media .ph, .split__media .ph { position: absolute; inset: 0; } /* Seção dividida: conteúdo + imagem */ .split { display: grid; gap: 32px; } .split__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #0b1020; } .split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; } .split__media { aspect-ratio: auto; min-height: 100%; } } /* Blocos de uma linha (título + frase curta) */ /* Passos numerados em linha (com traço ligando os números) */ .stepper { display: grid; gap: 20px; counter-reset: st; } .stepper li { position: relative; display: grid; gap: 6px; padding-top: 52px; } .stepper li::before { counter-increment: st; content: counter(st, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 40px; height: 40px; display: grid; place-items: center; background: var(--logo-blue); color: #fff; font: 700 14px/1 var(--f-title); } .stepper li::after { content: ""; position: absolute; top: 20px; left: 48px; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px); } .stepper li:last-child::after { display: none; } .stepper strong { font: 700 17px/1.3 var(--f-title); } .stepper span { color: var(--muted); font-size: 15px; line-height: 1.45; } @media (min-width: 700px) { .stepper { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; } } @media (max-width: 699px) { .stepper li::after { display: none; } } /* Detalhes que abrem sob demanda */ .more { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); background: #fff; } .sec--white .more { background: var(--bg-light); } [data-theme="dark"] .more { background: rgba(238, 238, 240, .04); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .12); } .more + .more { margin-top: 8px; } .more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; font: 700 16px/1.3 var(--f-title); } .more summary::-webkit-details-marker { display: none; } .more summary small { display: block; margin-bottom: 2px; font: 500 12px/1.4 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--blue); } [data-theme="dark"] .more summary small { color: var(--blue-soft); } .more summary::after { content: "+"; flex: 0 0 auto; font: 400 24px/1 var(--f-display); color: var(--blue); transition: transform .3s var(--ease-io-quad); } .more[open] summary::after { transform: rotate(45deg); } .more__body { padding: 0 20px 18px; } .more__body .checklist li { padding: 8px 0; font-size: 15px; } /* Lista enxuta de rótulos (sem descrição) */ /* ---------- Visual: cards com ícone ---------- */ /* ---------- Visual: os 4 pilares em diagrama 2x2 ---------- */ /* ---------- Visual: fases como setas (usa as abas existentes) ---------- */ /* ---------- Visual: gráficos de antes x depois (barras horizontais) ---------- Cores validadas para o fundo escuro (dataviz): antes = laranja, depois = azul. */ .viz { --c-before: #d95926; --c-after: #3987e5; --track: rgba(243, 243, 243, .1); } .viz-grid { display: grid; gap: 12px; } @media (min-width: 1000px) { .viz-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .viz-card { padding: 22px 22px 18px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .viz-card__title { font: 700 17px/1.3 var(--f-title); } .viz-card__sub { margin-top: 2px; color: var(--muted); font-size: 14px; } .viz-legend { display: flex; gap: 16px; margin: 14px 0 6px; font-size: 13px; color: var(--muted); } .viz-legend span { display: inline-flex; align-items: center; gap: 6px; } .viz-legend i { width: 10px; height: 10px; border-radius: 2px; } .viz-legend .b { background: var(--c-before); } .viz-legend .a { background: var(--c-after); } .viz-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid rgba(243, 243, 243, .08); } .viz-row:first-of-type { border-top: 0; } .viz-row__label { font: 500 14px/1.3 var(--f-display); } .viz-row__label small { display: block; color: var(--blue-soft); font: 700 12px/1.3 var(--f-label); } .viz-bars { position: relative; display: grid; gap: 2px; } .viz-bar { position: relative; display: flex; align-items: center; height: 18px; } .viz-bar i { display: block; height: 100%; width: var(--v); border-radius: 0 4px 4px 0; transition: width .9s var(--ease-out-circ); } .viz-bar--b i { background: var(--c-before); } .viz-bar--a i { background: var(--c-after); } .viz-bar b { margin-left: 8px; font: 700 13px/1 var(--f-display); white-space: nowrap; font-variant-numeric: tabular-nums; } .viz-target { position: absolute; top: -4px; bottom: -4px; left: var(--t); width: 1px; background: rgba(243, 243, 243, .55); } .viz-target span { position: absolute; top: -16px; left: 4px; font: 500 11px/1 var(--f-label); color: var(--muted); white-space: nowrap; } .viz-table { width: 100%; border-collapse: collapse; font-size: 14px; } .viz-table th, .viz-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid rgba(243, 243, 243, .1); font-variant-numeric: tabular-nums; } .viz-table th { color: var(--muted); font-weight: 500; } /* Número grande com mini comparação */ .hero-stat { display: grid; gap: 6px; padding: 22px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .hero-stat strong { font: 700 clamp(48px, 5vw, 72px)/1 var(--f-title); letter-spacing: -.03em; } .hero-stat > span { color: var(--muted); font-size: 15px; } /* ---------- Fundos de seção: azul-claro e azul da marca ---------- */ /* Condensado: split centralizado e lista de sinais simples */ @media (min-width: 1000px) { .split--center { align-items: center; } } .signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .signals li { display: flex; align-items: center; gap: 10px; padding: 10px 0; font: 500 15px/1.35 var(--f-display); background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .signals li::before { content: "×"; flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; background: rgba(217, 89, 38, .12); color: #c4501f; font: 700 13px/1 var(--f-title); } @media (max-width: 480px) { .signals { grid-template-columns: 1fr; } } /* ---------- Faixa "Outras soluções" com os cards da home ---------- */ .rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; } .rail__nav { display: flex; flex-wrap: wrap; gap: 4px; } .rail__track { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 84%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; } .rail__track::-webkit-scrollbar { display: none; } .rail__item { scroll-snap-align: start; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); } .rail__item .svc__link { padding: 20px; gap: 12px; } .rail__item .svc__title { font-size: 22px; } .rail__item .svc__desc { font-size: 15px; } @media (min-width: 700px) { .rail__track { grid-auto-columns: calc((100% - 12px) / 2); } } @media (min-width: 1100px) { .rail__track { grid-auto-columns: calc((100% - 24px) / 3); } } /* Faixa "Onde aplicamos" (páginas de solução): 1 foto por operação, sem texto de apoio nem link */ .rail__track--flow { scroll-snap-type: none; } /* deslize contínuo (js/pages.js) */ .svc--case .svc__link { min-height: 0; } .svc--case .svc__media { margin-bottom: 4px; } /* card de exemplo enquanto faltam foto e cliente: painel escuro da marca com o símbolo */ .svc--ph .svc__media { display: grid; place-items: center; background: radial-gradient(90% 80% at 50% 40%, #0b2b66 0%, #07142b 60%, #02060f 100%); } .svc__ph-logo { width: 56px; height: auto; opacity: .35; } .svc--ph .svc__title { color: var(--muted); } /* ---------- Método: seletor de visão + abas verticais (um item por vez) ---------- */ .views__switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: rgba(0, 74, 173, .08); } .views__btn { padding: 10px 18px; border: 0; background: none; cursor: pointer; font: 700 14px/1.2 var(--f-title); color: var(--black); } .views__btn[aria-selected="true"] { background: var(--logo-blue); color: #fff; } .views__btn:focus-visible, .vtabs__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .views__panel[hidden], .vtabs__panel[hidden] { display: none; } /* Sem JS: some o seletor e as duas visões aparecem em sequência */ .views:not(.is-ready) > .views__switch { display: none; } .views:not(.is-ready) > .views__panel + .views__panel { margin-top: 24px; } .vtabs { display: grid; gap: 12px; } .vtabs__list { display: grid; gap: 4px; align-content: start; } .vtabs__tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; text-align: left; cursor: pointer; background: #fff; color: var(--black); transition: background-color .2s var(--ease-io-quad); } .vtabs__tab:hover { background: #f4f7fc; } .vtabs__tab strong { display: block; font: 700 16px/1.25 var(--f-title); } .vtabs__tab small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; } .vtabs__num { flex: 0 0 34px; height: 34px; display: grid; place-items: center; background: rgba(0, 74, 173, .1); color: var(--logo-blue); font: 700 13px/1 var(--f-title); } .vtabs__tab[aria-selected="true"] { background: var(--logo-blue); color: #fff; } .vtabs__tab[aria-selected="true"] small { color: rgba(255, 255, 255, .75); } .vtabs__tab[aria-selected="true"] .vtabs__num { background: #fff; } .vtabs__panel { padding: 24px; background: #fff; } .vtabs__title { font: 700 24px/1.2 var(--f-title); letter-spacing: -.3px; text-wrap: balance; } .vtabs__text { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.5; } .vtabs__cols { display: grid; gap: 16px; margin-top: 8px; } .vtabs__deliver { margin-top: 12px; padding: 4px 18px 10px; background: #eef3fa; } .vtabs__cols .vtabs__deliver { margin-top: 0; } .vtabs:not(.is-ready) > .vtabs__list { display: none; } .vtabs:not(.is-ready) > .vtabs__panel + .vtabs__panel { margin-top: 8px; } @media (min-width: 900px) { .vtabs { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; } .vtabs__panel { padding: 32px 36px; } .vtabs__title { font-size: 28px; } .vtabs__cols { grid-template-columns: 1fr 1fr; gap: 24px; } } .method-note { margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--logo-blue); max-width: 80ch; color: var(--muted); font-size: 15px; line-height: 1.5; } .method-note strong { color: var(--black); } /* ================================================================= SUB-PÁGINAS ENXUTAS — componentes compartilhados (gerados por lean.py a partir do conteúdo existente) ================================================================= */ /* Painel de cada visão do seletor */ .views__switch { flex-wrap: wrap; } .views__body { padding: 24px; background: #fff; } .views__lead { margin-bottom: 16px; max-width: 70ch; color: var(--muted); font-size: 16px; line-height: 1.5; } .views__body > * + * { margin-top: 20px; } .views__body > .views__lead + * { margin-top: 0; } @media (min-width: 900px) { .views__body { padding: 32px 36px; } } /* Lista enxuta: título + uma linha, sem caixas */ .dlist { display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .dlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .dlist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dlist__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-content: start; padding: 14px 0; background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .dlist__num { grid-row: span 3; min-width: 28px; font: 700 14px/1.4 var(--f-title); color: var(--logo-blue); font-variant-numeric: tabular-nums; } .dlist__item strong { font: 700 16px/1.3 var(--f-title); } .dlist__item span:not(.dlist__num) { color: var(--muted); font-size: 15px; line-height: 1.45; } .dlist__gate { margin-top: 6px; justify-self: start; padding: 4px 8px; background: var(--logo-blue); color: #fff; font: 700 12.5px/1.35 var(--f-title); } /* Variação em cards (Soluções > "Por que escolher a Planning", 2026-10-29): caixa clara, número grande em azul, linha tracejada e malha de pontos no canto; no hover uma faixa azul cresce no topo. As três caixas esticam até a mesma altura. */ .dlist--cards { gap: 12px; } .dlist--cards .dlist__item { position: relative; overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0; padding: 32px 28px 36px; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: background-color .35s var(--ease-io-quad); } .dlist--cards .dlist__item::before { /* faixa azul do hover */ content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--logo-blue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-io-circ); } .dlist--cards .dlist__item::after { /* malha de pontos, como nas faixas de CAPEX/OPEX */ content: ""; position: absolute; top: 0; right: 0; width: 45%; height: 120px; pointer-events: none; background: radial-gradient(circle, rgba(0, 74, 173, .22) 1px, transparent 1.5px) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%); mask-image: linear-gradient(225deg, #000, transparent 70%); } .dlist--cards .dlist__num { grid-row: auto; padding-bottom: 20px; margin-bottom: 24px; font: 800 clamp(44px, 4vw, 60px)/1 var(--f-title); letter-spacing: -.03em; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .dlist--cards .dlist__item strong { font-size: 20px; line-height: 1.25; letter-spacing: -.2px; transition: color .35s var(--ease-io-quad); } .dlist--cards .dlist__item span:not(.dlist__num) { margin-top: 12px; font-size: 16px; line-height: 1.55; } .dlist--cards .dlist__item:hover { background: #eef4ff; } .dlist--cards .dlist__item:hover::before { transform: scaleX(1); } .dlist--cards .dlist__item:hover strong { color: var(--logo-blue); } /* Colunas com lista (ex.: Excesso x Falta, Construção x Revisão) */ .lcols { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 800px) { .lcols { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 32px; } } .lcols__col { padding-left: 16px; border-left: 3px solid var(--logo-blue); } .lcols__col:nth-child(2) { border-left-color: #d95926; } .lcols__tag { font: 700 12px/1.4 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--logo-blue); } .lcols__col h3 { margin: 4px 0 6px; font: 700 19px/1.25 var(--f-title); text-wrap: balance; } /* Fundo escuro: seletor, painéis, listas e notas */ [data-theme="dark"] .views__switch { background: rgba(238, 238, 240, .08); } [data-theme="dark"] .views__btn { color: var(--off-white); } [data-theme="dark"] .views__btn[aria-selected="true"] { background: var(--logo-blue); } [data-theme="dark"] .views__body, [data-theme="dark"] .vtabs__panel { background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } [data-theme="dark"] .vtabs__tab { background: rgba(238, 238, 240, .06); color: var(--off-white); } [data-theme="dark"] .vtabs__tab:hover { background: rgba(238, 238, 240, .12); } [data-theme="dark"] .vtabs__tab[aria-selected="true"] { background: var(--logo-blue); } [data-theme="dark"] .vtabs__num { background: rgba(153, 197, 255, .14); color: var(--blue-soft); } [data-theme="dark"] .vtabs__tab[aria-selected="true"] .vtabs__num { background: #fff; color: var(--logo-blue); } [data-theme="dark"] .vtabs__deliver { background: rgba(14, 118, 255, .1); } [data-theme="dark"] .dlist__num, [data-theme="dark"] .lcols__tag, [data-theme="dark"] .tabs__label { color: var(--blue-soft); } [data-theme="dark"] .lcols__col { border-left-color: var(--blue-soft); } [data-theme="dark"] .method-note { border-left-color: var(--blue-soft); } [data-theme="dark"] .method-note strong { color: var(--off-white); } /* Azul-claro: painéis brancos */ .sec--tint .views__switch { background: rgba(0, 74, 173, .1); } /* Nota dentro do painel: sem margem extra */ .views__body .method-note, .vtabs__panel .method-note { margin-top: 20px; } .views__title { font: 700 20px/1.25 var(--f-title); letter-spacing: -.2px; text-wrap: balance; } .views__title + .views__lead { margin-top: 6px; } .views__body > .views__title:not(:first-child), .sec__full > .views__title:not(:first-child) { margin-top: 32px; } .sec__full > .views__title + *, .sec__full > .views__lead + * { margin-top: 16px; } .sec__full > .method-note { margin-top: 20px; } /* Visão geral: quadro "Indicada para" */ .fit { padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .split > .fit { align-self: stretch; } /* cards lado a lado sempre com a mesma altura */ .fit__list li { display: flex; gap: 10px; padding: 10px 0; font: 500 15px/1.45 var(--f-display); /* 2026-10-23: 15px, escala padrão */ background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .fit__list li::before { content: "✓"; flex: 0 0 22px; height: 22px; display: grid; place-items: center; background: rgba(0, 74, 173, .1); color: var(--logo-blue); font: 700 12px/1 var(--f-title); } .page-hero__seg a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(153, 197, 255, .4); } .page-hero__seg a:hover { color: #fff; } .views__body .checklist--cols li { font-size: 15px; } /* 2026-10-23: 15px, mesma escala das descrições */ .dlist__item a { text-decoration: none; } .dlist__item a:hover { color: var(--logo-blue); text-decoration: underline; text-underline-offset: 3px; } .views__lead strong { color: var(--black); } /* ---------- Topo: foto ocupando o banner inteiro, com degradê ---------- A foto vira fundo do topo; o véu escurece o lado do texto (esquerda/baixo) e deixa a foto aparecer à direita. */ .page-hero--split { isolation: isolate; } .page-hero--split .page-hero__grid { display: block; } .page-hero--split .page-hero__grid > div:first-child { position: relative; max-width: 720px; } .page-hero--split > .page-hero__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; max-height: none; background: #020409; } .page-hero--split .page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .page-hero--split .page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 24%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .5) 100%), linear-gradient(90deg, rgba(2, 4, 9, .94) 0%, rgba(4, 12, 30, .8) 38%, rgba(7, 20, 43, .25) 68%, rgba(11, 43, 102, .08) 100%); } .page-hero--split .page-hero__media .ph { box-shadow: none; background: radial-gradient(120% 90% at 30% 120%, #0b2b66 0%, #07142b 45%, #020409 75%, #000 100%); } .page-hero--split .page-hero__media .ph > * { display: none; } @media (min-width: 1000px) { .page-hero--split { padding-top: calc(var(--header-h) + 40px + env(safe-area-inset-top, 0px)); padding-bottom: 96px; } .page-hero--split > .wrap { width: 100%; } .page-hero--split .page-hero__media { aspect-ratio: auto; } .page-hero--split .page-hero__title { font-size: clamp(52px, 5vw, 84px); } } @media (max-width: 999px) { .page-hero--split .page-hero__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(2, 4, 9, .72) 45%, rgba(2, 4, 9, .92) 100%); } } /* Topo com foto: menos respiro acima do conteúdo (celular) */ .page-hero--split { padding-top: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)); } .page-hero--split .crumbs { margin-bottom: 20px; } /* ================================================================= SOBRE (rev. 03): fotos do escritório no topo, Plataforma + números, Diferencial, Missão/Visão/Valores, História em linha do tempo, "Quem conduz" e Presença nacional (mapa + carrossel de fotos). ================================================================= */ /* Aparecer ao entrar na tela (js/pages.js põe .is-in). Sem JS: tudo visível. */ .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-io-quad), transform .9s var(--ease-out-circ); transition-delay: var(--d, 0s); } .js-reveal .reveal.is-in { opacity: 1; transform: none; } /* Topo: fotos em sequência com zoom lento */ .hero-fade picture { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-io-quad); } .hero-fade picture.is-active { opacity: 1; } .hero-fade img { transform-origin: 60% 50%; } .hero-fade picture.is-active img { animation: kenburns 9s linear both; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } } /* Desktop: fotos num painel vertical à direita, no tamanho real ou menor (nunca esticadas). O texto fica sobre o fundo escuro padrão do topo; um degradê funde a borda do painel. */ @media (min-width: 1000px) { .page-hero--panel { background: radial-gradient(120% 90% at 30% 120%, #0b2b66 0%, #07142b 45%, #020409 75%, #000 100%); } .page-hero--panel > .page-hero__media { left: auto; width: min(44%, 900px); background: #020409; } .page-hero--panel .page-hero__media::after { background: linear-gradient(90deg, #020409 0%, rgba(2, 4, 9, .55) 18%, rgba(2, 4, 9, 0) 45%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .35) 100%); } .page-hero--panel .page-hero__media img { object-position: center 50%; } .page-hero--panel .page-hero__grid > div:first-child { max-width: min(720px, 54%); } } /* Diferencial: textos soltos (sem cards) + animação da seta do valor sem moldura */ .dif3__list { margin-top: 36px; } .dif3__item { padding: 24px 0; background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .dif3__num { display: block; margin-bottom: 10px; color: var(--blue); font: 700 13px/1.4 var(--f-label); letter-spacing: 1.04px; } .dif3__title { font: 700 22px/1.2 var(--f-title); letter-spacing: -.3px; } .dif3__item p { margin-top: 10px; max-width: 54ch; color: rgba(0, 0, 0, .7); font-size: 17px; line-height: 1.55; text-wrap: pretty; } /* rev. 06: foto real de campo no lugar do gráfico. Moldura tracejada com pino azul; os três atributos acendem em sequência e o selo "Mais valor" fecha a leitura. */ .difphoto { grid-column: 1 / -1; position: relative; margin: 8px 0 0; padding: 10px; background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat, repeating-linear-gradient(180deg, var(--dc) 0 4px, transparent 4px 8px) left top / 1px 100% no-repeat, repeating-linear-gradient(180deg, var(--dc) 0 4px, transparent 4px 8px) right top / 1px 100% no-repeat; } .difphoto::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 6px; height: 6px; background: var(--blue); } .difphoto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; } .difphoto__chips { position: absolute; left: 26px; bottom: 26px; display: grid; justify-items: start; gap: 6px; } .difphoto__chips li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 700 15px/1 var(--f-title); color: var(--black); box-shadow: 0 10px 30px rgba(7, 20, 43, .18); } .difphoto__chips svg { width: 22px; height: 22px; padding: 4px; background: var(--blue); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .difphoto__badge { position: absolute; top: 26px; right: 26px; display: grid; gap: 2px; padding: 12px 16px; background: var(--logo-blue); color: #fff; } .difphoto__badge strong { font: 700 22px/1.1 var(--f-title); letter-spacing: -.3px; } .difphoto__badge span { font: 500 12px/1.3 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--blue-soft); } @media (min-width: 800px) { .dif3__head { grid-column: 1 / span 5; } .difphoto { grid-column: 7 / span 6; align-self: center; margin-top: 0; max-width: 560px; justify-self: end; width: 100%; } .dif3__title { font-size: 24px; } } /* Missão, Visão e Valores: uma jornada (Missão → Valores → Visão), sem cards. Celular: caminho vertical. Desktop (≥1000px): caminho horizontal em 7 paradas. A linha/ponto são posicionados pelo js/pages.js ([data-journey]). */ .jr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; } .jr__track { position: absolute; left: var(--tx, 27px); top: var(--ty, 0); width: var(--tw, 2px); height: var(--th, 0); pointer-events: none; } .jr__track::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(var(--tdir, 180deg), rgba(0, 74, 173, .3) 0 5px, transparent 5px 10px); } .jr__fill { position: absolute; left: 0; top: 0; width: var(--fw, 100%); height: var(--fh, 100%); background: linear-gradient(var(--tdir, 180deg), rgba(14, 118, 255, .35), var(--blue)); transition: opacity .5s var(--ease-io-quad); } .jr__dot { position: absolute; left: var(--dx, 0); top: var(--dy, 0); width: 14px; height: 14px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--blue), 0 0 22px 6px rgba(14, 118, 255, .55); transition: opacity .5s var(--ease-io-quad); } .jr.is-reset .jr__fill, .jr.is-reset .jr__dot { opacity: 0; } .jr__stop { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; padding-bottom: 28px; } .jr__stop--value { align-items: center; padding-bottom: 16px; } .jr__node { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(0, 74, 173, .22); color: var(--logo-blue); transition: background-color .45s var(--ease-io-quad), color .45s var(--ease-io-quad), box-shadow .45s var(--ease-io-quad), transform .6s var(--ease-out-circ); } .jr__node svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .jr__node b { font: 700 12px/1 var(--f-label); letter-spacing: 1px; text-transform: uppercase; } .jr__node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--blue); opacity: 0; } .jr__stop.is-on .jr__node { background: var(--blue); color: #fff; box-shadow: none; transform: scale(1.06); } .jr__stop.is-on .jr__node::after { animation: jrping 1.3s var(--ease-out-circ); } @keyframes jrping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } } .jr__stop--start .jr__node { background: var(--navy); color: #fff; box-shadow: none; } .jr__stop--goal .jr__node { background: var(--navy); color: #fff; box-shadow: none; } .jr__stop--goal.is-on .jr__node { background: var(--blue); box-shadow: 0 0 0 8px rgba(14, 118, 255, .18), 0 0 40px 8px rgba(14, 118, 255, .35); } /* Rótulos Missão / Valores / Visão em destaque (pedido do usuário: estavam pequenos demais) */ .jr__label { display: block; margin-bottom: 12px; color: var(--logo-blue); font: 700 28px/1.1 var(--f-title); letter-spacing: -.5px; } .jr__text { max-width: 46ch; font: 500 18px/1.5 var(--f-display); color: rgba(0, 0, 0, .8); text-wrap: pretty; } .jr__value { font: 700 19px/1.2 var(--f-title); letter-spacing: -.2px; transition: color .4s; } .jr__stop.is-on .jr__value { color: var(--logo-blue); } .jr__year { display: block; margin: -4px 0 10px; font: 700 64px/.9 var(--f-title); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--logo-blue); transition: color .6s var(--ease-io-quad); } .jr__stop--goal.is-on .jr__year { color: var(--logo-blue); } .jr__group { padding: 12px 0 20px 74px; } .jr__group .jr__label { margin: 0; } @media (min-width: 1000px) { .jr { grid-template-columns: minmax(0, 3.2fr) repeat(5, minmax(0, 1fr)) minmax(0, 3.2fr); grid-template-rows: auto auto; column-gap: 12px; margin-top: 24px; } .jr__stop { grid-row: 2; display: flex; flex-direction: column; gap: 22px; padding: 0; } .jr__stop--value { align-items: center; text-align: center; padding-top: 6px; } .jr__node { width: 64px; height: 64px; } .jr__node svg { width: 26px; height: 26px; } .jr__stop--start .jr__node, .jr__stop--goal .jr__node { width: 76px; height: 76px; } .jr__stop--goal .jr__node svg { width: 30px; height: 30px; } .jr__value { font-size: 17px; } .jr__text { font-size: 19px; } .jr__year { font-size: 88px; } /* "Valores" com um colchete tracejado sobre as 5 paradas */ .jr__label { font-size: 36px; letter-spacing: -.8px; } .jr__group { grid-row: 1; grid-column: 2 / 7; position: relative; padding: 0 0 26px; text-align: center; } .jr__group::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 8px; border: 1.5px dashed rgba(0, 74, 173, .35); border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .jr__stop.is-on .jr__node::after { animation: none; } } /* Nossa História: título fixo à esquerda, capítulos com linha que enche à direita */ .hist__year { margin-top: 24px; font: 700 96px/.9 var(--f-title); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--logo-blue); } .timeline { grid-column: 1 / -1; position: relative; padding-left: 28px; --p: 0; } .timeline::before, .timeline::after { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; } .timeline::before { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 4px, transparent 4px 8px); } .timeline::after { background: var(--blue); transform-origin: top; transform: scaleY(var(--p)); } .tl { position: relative; padding-bottom: 44px; } .tl:last-child { padding-bottom: 0; } .tl::before { content: ""; position: absolute; left: -27px; top: 6px; width: 11px; height: 11px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); z-index: 1; transition: background-color .4s; } .tl.is-passed::before { background: var(--blue); } .tl__tag { display: inline-block; padding: 3px 8px; background: rgba(0, 74, 173, .08); color: var(--logo-blue); font: 700 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; } .tl__title { margin: 12px 0 10px; font: 700 22px/1.2 var(--f-title); letter-spacing: -.3px; text-wrap: balance; } .tl p { max-width: 64ch; font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, .74); text-wrap: pretty; } .tl__quote { margin-top: 24px; padding-top: 24px; font: 700 26px/1.2 var(--f-title); letter-spacing: -.5px; color: var(--logo-blue); text-wrap: balance; background: repeating-linear-gradient(90deg, var(--dc) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .tl__quote::before { content: "\201C"; display: block; height: .5em; font-size: 64px; line-height: .8; color: var(--blue); } @media (min-width: 800px) { .hist__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); } .hist__year { font-size: clamp(120px, 11vw, 176px); } .timeline { grid-column: 6 / span 7; padding-top: 24px; padding-left: 40px; } .timeline::before, .timeline::after { top: 32px; } .tl { padding-bottom: 64px; } .tl::before { left: -39px; } .tl__title { font-size: 28px; } .tl p { text-align: justify; hyphens: auto; } .tl__quote { font-size: 34px; } } /* Presença nacional: fundo azul-marinho, sedes + mapa de pontos + carrossel de fotos */ .sec--navy { background: radial-gradient(90% 70% at 75% 40%, #0b3a8a 0%, #072256 40%, #04122e 75%, #020814 100%); padding-bottom: 0; } .pres__head .sec__intro { max-width: 52ch; } /* Cards dos endereços das sedes (sobre.html #presenca). Restaurados em 2026-11-07: tinham saído junto com os cards de solucoes.html na rev. 0611. Escopo em .sedes para não brigar com os chips .regs .sede. */ .sedes { display: grid; gap: 4px; margin-top: 32px; padding: 0; list-style: none; } .sedes .sede { display: grid; gap: 4px; padding: 16px 16px 16px 18px; outline: none; background: rgba(238, 238, 240, .05); box-shadow: inset 2px 0 0 rgba(153, 197, 255, .25); transition: background-color .3s var(--ease-io-quad), box-shadow .3s var(--ease-io-quad); } .sedes .sede.is-on, .sedes .sede:focus-visible { background: rgba(238, 238, 240, .12); box-shadow: inset 3px 0 0 var(--blue); } .sedes .sede strong { font: 700 20px/1.25 var(--f-title); } .sedes .sede > span:last-child { color: var(--muted); font-size: 14.5px; line-height: 1.4; } /* Legenda do mapa por região (rev. 0611): região à esquerda, estados em chips; mouse no chip acende o pino */ .regs { margin: 32px 0 0; } .regs__row { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 12px; padding: 12px 0; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .18) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .regs dt { font: 500 12px/1.2 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--muted); } .regs dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .regs .sede { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; outline: none; cursor: default; font-size: 15px; line-height: 1.2; color: #fff; background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); transition: background-color .3s var(--ease-io-quad), box-shadow .3s var(--ease-io-quad); } .regs .sede b { font: 700 11px/1 var(--f-label); letter-spacing: .6px; padding: 4px 5px; color: #99c5ff; background: rgba(14, 118, 255, .16); } .regs .sede.is-on, .regs .sede:focus-visible { background: rgba(238, 238, 240, .14); box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .45); } .regs__key { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); } .regs__key i { width: 3px; height: 14px; background: var(--blue); } .brmap { grid-column: 1 / -1; position: relative; width: 100%; max-width: 640px; justify-self: center; } .brmap svg { display: block; width: 100%; height: auto; overflow: visible; } .brmap .d { fill: rgba(153, 197, 255, .3); } .brmap .link { fill: none; stroke: rgba(153, 197, 255, .6); stroke-width: 1.2; stroke-dasharray: 4 5; animation: dash 1.6s linear infinite; } @keyframes dash { to { stroke-dashoffset: -18; } } .brmap .pin__core { fill: #fff; transition: transform .3s var(--ease-out-circ); transform-box: fill-box; transform-origin: center; } .brmap .pin__ring { fill: none; stroke: var(--blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2.4s var(--ease-out-circ) infinite; } .brmap .pin__label { fill: #fff; font: 700 14px/1 var(--f-label); letter-spacing: .3px; paint-order: stroke; stroke: rgba(2, 8, 20, .9); stroke-width: 4px; opacity: .7; transition: opacity .3s; } .brmap .pin.is-on .pin__label { opacity: 1; } .brmap .pin.is-on .pin__core { transform: scale(1.5); } .brmap .pin:nth-of-type(2) .pin__ring { animation-delay: .8s; } .brmap .pin:nth-of-type(3) .pin__ring { animation-delay: 1.6s; } @keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } } @media (min-width: 800px) { .pres__head { grid-column: 1 / span 5; } .brmap { grid-column: 7 / span 6; align-self: center; justify-self: start; max-width: 560px; } } /* rev. 06: fotos de campo em cards (foto, etiqueta e texto curto) numa faixa contínua, igual à de segmentos da home: desliza sozinha, para no hover e some nas bordas */ /* bloco de fotos de campo (solucoes.html #presenca). Antes era .field e conflitava com os campos do formulário de contato */ .pres-fotos { margin-top: 64px; padding-bottom: 72px; } .field__title { font: 700 28px/1.1 var(--f-title); letter-spacing: -.4px; margin-top: 12px; } .field__marquee { display: flex; margin-top: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .field__track { list-style: none; display: flex; gap: 12px; padding-right: 12px; flex: none; animation: field-marquee 80s linear infinite; } .field__marquee:hover .field__track, .field__marquee:focus-within .field__track { animation-play-state: paused; } @keyframes field-marquee { to { transform: translateX(-100%); } } .field__card { flex: none; width: 270px; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 20px; background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .field__card figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #0b1020; } .field__card img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform .8s var(--ease-out-circ); } .field__card:hover img { transform: scale(1.05); } .field__tag { align-self: flex-start; margin: 4px 8px 0; padding: 4px 8px; background: var(--blue); color: #fff; font: 700 11px/1.3 var(--f-label); letter-spacing: 1px; text-transform: uppercase; } .field__text { margin: 0 8px; font-size: 16px; line-height: 1.45; color: rgba(243, 243, 243, .82); text-wrap: pretty; } @media (min-width: 800px) { .pres-fotos { margin-top: 88px; padding-bottom: 104px; } .field__title { font-size: 34px; } .field__marquee { margin-top: 44px; } .field__card { width: 330px; } } /* Movimento reduzido: sem deslizar; a faixa rola com o dedo/trackpad */ @media (prefers-reduced-motion: reduce) { .hero-fade picture.is-active img, .brmap .link, .brmap .pin__ring { animation: none; } .field__marquee { overflow-x: auto; scrollbar-width: none; } .field__track { animation: none; } .field__track[aria-hidden="true"] { display: none; } } /* ---------- Sobre: "Unindo forças" (layout original, só com mais respiro e escala) ---------- */ .sec.nums { padding-block: 88px; } .nums .sec__grid { row-gap: 48px; } .nums .sec__intro { max-width: 56ch; font-size: 18px; line-height: 1.55; } .nums .stat-box { padding: 28px 24px; } .nums .stat-box strong { font-size: clamp(34px, 3.4vw, 56px); } .nums .stat-box span { margin-top: 12px; font-size: 16px; } /* número do contador (js/pages.js): igual ao resto do número, não à legenda */ .nums .stat-box strong span { display: inline; margin: 0; font: inherit; color: inherit; } @media (min-width: 800px) { .sec.nums { padding-block: 128px; } .nums .sec__grid { row-gap: 64px; } .nums .sec__title { font-size: 48px; letter-spacing: -1.2px; } .nums .sec__intro { font-size: 19px; } .nums .stat-box { padding: 36px 28px; } } /* ---------- Sobre: chamada final clara (o rodapé logo abaixo é escuro) ---------- */ .cta-band--light { position: relative; overflow: hidden; isolation: isolate; background: #dce5f2; color: var(--black); } .cta-band--light .page-hero__eyebrow { color: var(--blue); } /* etiqueta legível no fundo claro */ .cta-band--light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(0, 74, 173, .16) 1.2px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 30%, #000 85%); } .cta-band__art { position: absolute; z-index: -1; right: -4%; bottom: 8%; width: min(70%, 640px); height: auto; opacity: .45; overflow: visible; } .cta-band__path { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 12; animation: ctaflow 1.6s linear infinite; } .cta-band__head { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } @keyframes ctaflow { to { stroke-dashoffset: -22; } } @media (min-width: 800px) { .cta-band__art { right: 3%; bottom: 14%; width: min(44%, 640px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cta-band__path { animation: none; } } /* ================================================================= GERENCIAMENTO DE PROJETOS (rev. 05): planta industrial em 3D no topo (js/plant3d.js). Fundo de prancheta escura com malha de pontos; o modelo ocupa o lado direito (desktop) ou fica abaixo do texto (celular). ================================================================= */ .page-hero--plant > .page-hero__media { background: radial-gradient(circle, rgba(120, 170, 255, .14) 1px, transparent 1.5px) 0 0 / 22px 22px, radial-gradient(55% 65% at 74% 55%, rgba(14, 118, 255, .14), transparent 70%), radial-gradient(120% 90% at 30% 120%, #0b2b66 0%, #07142b 45%, #020409 75%, #000 100%); } .page-hero--plant .page-hero__media::after { display: none; } .plant3d { position: absolute; inset: 0; width: 100%; height: 100%; } @media (max-width: 999px) { /* espaço abaixo do texto para o modelo */ .page-hero--plant { padding-bottom: calc(40px + min(92vw, 560px)); } } @media (min-width: 1000px) { .page-hero--plant { display: flex; align-items: center; min-height: min(860px, 92vh); } } /* ================================================================= PÁGINAS ÚNICAS DE SOLUÇÃO (rev. 06) Barra "Nesta página" presa abaixo do cabeçalho, com atalhos para as soluções reunidas na página (js/pages.js, [data-subnav]); cada solução absorvida vira uma seção .sol: visão geral + como funciona + perguntas. ================================================================= */ .subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(4, 12, 30, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(243, 243, 243, .08); } .subnav__inner { display: flex; align-items: center; gap: 20px; min-height: 52px; } .subnav__label { display: none; flex: none; font: 500 12px/1 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue-soft); } .subnav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; } .subnav__list::-webkit-scrollbar { display: none; } .subnav__list a { display: block; padding: 9px 12px; white-space: nowrap; color: rgba(243, 243, 243, .72); font: 500 14px/1 var(--f-display); transition: color .2s var(--ease-io-quad), background-color .2s var(--ease-io-quad); } .subnav__list a:hover { color: #fff; background: rgba(238, 238, 240, .08); } .subnav__list a.is-active { color: #fff; background: var(--logo-blue); } body:has(.subnav) [id] { scroll-margin-top: calc(var(--header-h) + 64px); } @media (min-width: 1000px) { .subnav__label { display: block; } } .sol__how { margin-top: 56px; } .sol__how > .tabs__label { margin-bottom: 16px; } .sol__faq { margin-top: 24px; } /* Página Soluções: CAPEX, OPEX e Complementares lado a lado */ /* 2026-10-27: cada coluna abre com uma faixa escura (sigla grande e nome da frente; sem a quantidade desde 2026-10-29); os itens têm seta e fundo no hover. Colunas com a mesma altura (grid). */ .solcols { display: grid; gap: 12px; margin-top: 40px; } .solcol { position: relative; display: flex; flex-direction: column; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .solcol__head { position: relative; display: grid; align-items: end; align-content: space-between; gap: 6px 16px; padding: 24px; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #0b3a8a 0%, var(--navy) 60%); } .solcol__head--opex { background: radial-gradient(120% 140% at 100% 0%, #0e5fd0 0%, #072256 65%); } .solcol__head--comp { background: radial-gradient(120% 140% at 100% 0%, #1d2a44 0%, #05070d 65%); } .solcol__head::after { /* malha de pontos, como no hero e no rodapé */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(153, 197, 255, .28) 1px, transparent 1.5px) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000); } .solcol__tag { grid-column: 1 / -1; font: 800 clamp(34px, 3.4vw, 48px)/1 var(--f-title); letter-spacing: -.03em; color: var(--blue-soft); } /* nome longo ("Soluções complementares") em uma linha, na mesma altura de CAPEX/OPEX */ .solcol__tag--long { display: flex; align-items: flex-end; min-height: clamp(34px, 3.4vw, 48px); font-size: clamp(22px, 2.05vw, 30px); white-space: nowrap; } .solcol__title { font: 700 18px/1.25 var(--f-title); letter-spacing: -.2px; } .solcol__list { padding: 8px 12px 16px; counter-reset: sol; } .solcol__list li { counter-increment: sol; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 4px, transparent 4px 8px) 12px 0 / calc(100% - 24px) 1px no-repeat; } .solcol__list li:first-child { background: none; } .solcol__list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 4px 8px; padding: 14px 12px; transition: background-color .2s var(--ease-io-quad); } .solcol__list a::before { content: counter(sol, decimal-leading-zero); grid-row: span 2; color: var(--blue); font: 700 13px/1.5 var(--f-label); letter-spacing: 1.04px; } .solcol__list a::after { /* seta */ content: ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; background: currentColor; opacity: .25; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease-io-quad), opacity .2s, color .2s; } .solcol__list strong { grid-column: 2; font: 700 16px/1.3 var(--f-title); transition: color .2s var(--ease-io-quad); } .solcol__list span { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.45; } .solcol__list a:hover, .solcol__list a:focus-visible { background: #eef4ff; } .solcol__list a:hover strong, .solcol__list a:focus-visible strong { color: var(--blue); } .solcol__list a:hover::after, .solcol__list a:focus-visible::after { opacity: 1; color: var(--blue); transform: translateX(3px); } @media (min-width: 1100px) { /* faixa + lista em linhas compartilhadas (subgrid): as três faixas têm a altura da mais alta, qualquer que seja o número de linhas do nome, e as listas começam juntas */ .solcols { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; margin-top: 48px; } .solcol { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } } /* Gerenciamento de Projetos (rev. 06, ajuste): 5 cards logo após o topo e, abaixo, o detalhe da solução escolhida (js/pages.js, [data-solpick]). Celular/tablet: os cards deslizam na horizontal; desktop: os 5 lado a lado. */ .solpick__cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 74%); gap: 12px; margin-top: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-margin-top: calc(var(--header-h) + 16px); } .solpick__cards::-webkit-scrollbar { display: none; } .solpick__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 18px; margin: 0; border: 0; text-align: left; font: inherit; color: var(--black); cursor: pointer; scroll-snap-align: start; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); transition: background-color .3s var(--ease-io-quad), color .3s var(--ease-io-quad); } .solpick__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 6px; background: #0b1020; } .solpick__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-circ); } .solpick__card:hover .solpick__media img { transform: scale(1.05); } .solpick__num, .solpick__name, .solpick__desc, .solpick__more { padding-inline: 6px; } .solpick__num { color: var(--blue); font: 700 13px/1.4 var(--f-label); letter-spacing: 1.04px; } .solpick__name { font: 700 19px/1.2 var(--f-title); letter-spacing: -.2px; } .solpick__desc { color: var(--muted); font-size: 14px; line-height: 1.45; } .solpick__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--blue); font: 700 12px/1 var(--f-label); letter-spacing: 1px; text-transform: uppercase; } .solpick__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; } /* card escolhido: escuro, com seta apontando para o detalhe */ .solpick__card[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: none; } .solpick__card[aria-selected="true"] .solpick__desc { color: rgba(243, 243, 243, .7); } .solpick__card[aria-selected="true"] .solpick__num, .solpick__card[aria-selected="true"] .solpick__more { color: var(--blue-soft); } .solpick__card[aria-selected="true"] .solpick__more { visibility: hidden; } .solpick__panels { margin-top: 12px; padding: 32px 20px; background: #eceff4; } .solpick__panel[hidden] { display: none; } .solpick__panel + .solpick__panel { margin-top: 48px; } /* sem JS: todos visíveis, um após o outro */ @media (min-width: 800px) { .solpick__cards { grid-auto-columns: calc((100% - 24px) / 3); } .solpick__panels { padding: 48px 40px; } } @media (min-width: 1100px) { .solpick__cards { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } .solpick__card[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 12px; transform: translateX(-50%); background: var(--navy); clip-path: polygon(0 0, 100% 0, 50% 100%); } } /* Sobre (rev. 06): Missão, Valores e Visão dentro de um card com a foto do letreiro da Planning ao fundo; véu azul-escuro para os textos (brancos) lerem bem por cima */ .jr-card { position: relative; overflow: hidden; isolation: isolate; padding: 36px 20px 12px; background: var(--navy); color: #fff; } .jr-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; } .jr-card::before { content: ""; position: absolute; inset: 0; z-index: -1; /* sem foto (2026-10-26): brilho azul no alto e malha leve, como os outros painéis escuros */ background: radial-gradient(90% 70% at 85% 0%, rgba(14, 118, 255, .28) 0%, transparent 60%), linear-gradient(165deg, #0a1830 0%, #07142b 60%, #02060f 100%); } .jr-card .jr { margin-top: 0; } .jr-card .jr__label, .jr-card .jr__stop.is-on .jr__value { color: #fff; } .jr-card .jr__text { color: rgba(243, 243, 243, .86); } .jr-card .jr__value { color: rgba(243, 243, 243, .9); } .jr-card .jr__year { -webkit-text-stroke-color: var(--blue-soft); } .jr-card .jr__stop--goal.is-on .jr__year { color: var(--blue-soft); } .jr-card .jr__node { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(153, 197, 255, .45); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .jr-card .jr__stop--start .jr__node, .jr-card .jr__stop--goal .jr__node { background: var(--blue); box-shadow: none; } .jr-card .jr__track::before { background: repeating-linear-gradient(var(--tdir, 180deg), rgba(153, 197, 255, .4) 0 5px, transparent 5px 10px); } @media (min-width: 1000px) { .jr-card { padding: 56px 48px 64px; } .jr-card .jr__group::after { border-color: rgba(153, 197, 255, .5); } } /* ================================================================= SEGMENTOS (rev. 07): topo com o mesmo fundo do hero da home (vídeo + shader "malha de inspeção", js/hero-shader.js; o degradê .hero-scrim garante a leitura) e grade de 4 colunas, sem descrição. ================================================================= */ .page-hero--mesh .page-hero__media::after { display: none; } .page-hero--mesh .page-hero__media { background: #02060f; } @media (min-width: 1000px) { .page-hero--mesh { display: flex; align-items: flex-end; min-height: min(820px, 88vh); padding-bottom: 112px; } /* Segmentos: título em 2 linhas (não 3), então o topo encolhe uma linha para não sobrar vazio em cima */ .page-hero--mesh:has(.page-hero__title--2l) { min-height: min(740px, 80vh); } } @media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ================================================================= TREINAMENTOS (rev. 08): Para você / Para sua empresa, avaliações dos alunos, grade de cursos em abas (ementa recolhida) e canal do YouTube ================================================================= */ /* Para você / Para sua empresa */ .aud { display: grid; gap: 12px; } .aud__card { position: relative; display: grid; background: #fff; } .aud__card::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 6px; height: 6px; background: var(--blue); } .aud__media { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #0b1020; } .aud__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-circ); } .aud__card:hover .aud__media img { transform: scale(1.04); } .aud__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 24px 32px; } .aud__tag { padding: 4px 8px; background: var(--blue); color: #fff; font: 700 11px/1.3 var(--f-label); letter-spacing: 1px; text-transform: uppercase; } .aud__title { font: 700 24px/1.15 var(--f-title); letter-spacing: -.3px; text-wrap: balance; } .aud__body p { color: var(--muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; } .aud__body .btn { margin-top: auto; } @media (min-width: 900px) { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aud__body { padding: 32px 36px 36px; } .aud__title { font-size: 28px; } } /* Números + avaliações dos alunos */ .rate { display: grid; gap: 32px; } .rate__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .rate__stats li { display: grid; gap: 6px; padding: 20px 16px; background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .rate__stats strong { font: 700 clamp(30px, 4vw, 56px)/1 var(--f-title); letter-spacing: -.03em; color: #fff; } .rate__stats span { color: var(--muted); font-size: 14px; line-height: 1.3; } .rate__panel { padding: 24px 20px; background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .rate__label { margin-bottom: 16px; color: var(--blue-soft); font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; } .rate__list { display: grid; gap: 16px; } .rate__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; } .rate__list span { color: rgba(243, 243, 243, .88); font-size: 15px; } .rate__list b { font: 700 20px/1 var(--f-title); color: #fff; font-variant-numeric: tabular-nums; } /* barra: a escala começa em 90 para as diferenças entre as notas aparecerem */ .rate__list i { grid-column: 1 / -1; height: 4px; background: rgba(243, 243, 243, .12); } .rate__list i::before { content: ""; display: block; height: 100%; width: calc((var(--v) - 90) * 10%); background: linear-gradient(90deg, var(--logo-blue), var(--blue)); } @media (min-width: 1000px) { .rate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; } .rate__stats { grid-template-columns: minmax(0, 1fr); } .rate__stats li { align-content: center; padding: 24px 28px; } .rate__panel { padding: 32px 36px; } } /* Grade de cursos: cards com a ementa recolhida (
) */ .courses { display: grid; gap: 8px; align-items: start; } .course { position: relative; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: box-shadow .25s var(--ease-io-quad); } .course[open], .course:hover { box-shadow: inset 0 0 0 1px var(--blue); } .course summary { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 10px; padding: 20px 20px 18px; cursor: pointer; list-style: none; } .course summary::-webkit-details-marker { display: none; } .course__num { grid-row: span 2; color: var(--blue); font: 700 13px/1.6 var(--f-label); letter-spacing: 1.04px; } .course strong { font: 700 17px/1.3 var(--f-title); letter-spacing: -.1px; } .course__more { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font: 700 11px/1.4 var(--f-label); letter-spacing: 1px; text-transform: uppercase; } .course__more::after { content: "+"; font-size: 16px; line-height: 1; transition: transform .3s var(--ease-io-circ); } .course[open] .course__more::after { transform: rotate(45deg); } .course p { padding: 0 20px 22px 58px; color: var(--muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; } @media (min-width: 800px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Canal no YouTube (PlanningCast) — 2026-10-23: mesmo padrão das faixas de cards do site ("Conheça os projetos" na home e "Outras soluções" nas páginas de solução): título, texto e botão empilhados à esquerda, setas à direita e cards .svc numa faixa que rola para o lado. Só o que é próprio dos vídeos fica aqui: capa 16:9 com play e o vídeo tocando no card. */ .yt .rail__head { align-items: flex-end; margin-bottom: 40px; } .yt .sec__intro { max-width: 60ch; } .yt .page-hero__ctas { margin-top: 24px; } .yt .rail__item .svc__title { max-width: none; } .yt__media, .yt__watch { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .yt__media { display: block; width: 100%; aspect-ratio: 16 / 9; } .yt__media iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; } .yt__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 8px rgba(255, 255, 255, .16), 0 10px 24px rgba(4, 12, 28, .3); transition: transform .4s var(--ease-io-circ), background-color .3s; } .yt__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--blue); } .svc__link:hover .yt__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; } .svc__link:hover .yt__media .svc__img { transform: scale(1.03); } .yt__watch { color: inherit; } .svc__link:hover .yt__watch { color: var(--logo-blue); } /* tocando: só o vídeo, sem véu, legenda ou play por cima */ .yt__media.is-on::after { display: none; } /* Botão "Ver o canal no YouTube": texto no azul do site, quadrado do ícone no vermelho do YouTube */ .yt .btn--primary { --btn-bg: var(--blue); --btn-fg: #fff; --icon-bg: #ff0000; --icon-fg: #fff; } .yt .btn--primary:hover { --icon-bg: #cc0000; } /* no lugar da seta, o símbolo do YouTube (retângulo branco com o "play" vermelho) */ .btn__icon svg.btn__ytlogo { width: 20px; height: 20px; stroke: none; } .btn__ytlogo rect { fill: #fff; } .btn__ytlogo path { fill: #ff0000; } .yt .btn--primary:hover .btn__ytlogo path { fill: #cc0000; } /* ================================================================= SEGMENTOS: carrossel contínuo de clientes (largura total da tela) Reaproveita o card .ctile da home (css/style.css) numa linha reta, todos do mesmo tamanho e nítidos (sem a profundidade da pirâmide). ================================================================= */ .lmq-sec { padding-block: 28px; overflow: hidden; overflow: clip; } /* só a faixa, sem título; mesmo fundo cinza da grade de segmentos (continuidade) */ .lmq { --t: 76px; --k: 1; --op: 1; --blur: 0px; --row: 0; --d: 0; display: flex; padding-block: 16px 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .lmq__track { display: flex; flex: none; gap: 14px; padding-right: 14px; animation: lmq-scroll 90s linear infinite; } .lmq:hover .lmq__track { animation-play-state: paused; } @keyframes lmq-scroll { to { transform: translateX(-100%); } } .lmq__item { flex: none; } /* brilho que atravessa os cards em sequência (mesmo efeito da home) */ .lmq__item:nth-child(5n+2) { --d: -.6; } .lmq__item:nth-child(5n+3) { --d: -.2; } .lmq__item:nth-child(5n+4) { --d: .2; } .lmq__item:nth-child(5n+5) { --d: .6; } .lmq__item:hover .ctile { translate: 0 -6px; scale: 1.06; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 8px rgba(7, 20, 43, .1), 0 22px 44px rgba(7, 20, 43, .22); } @media (min-width: 800px) { .lmq-sec { padding-block: 40px; } .lmq { --t: 100px; } .lmq__track { gap: 18px; padding-right: 18px; } } @media (prefers-reduced-motion: reduce) { .lmq { overflow-x: auto; scrollbar-width: none; } .lmq__track { animation: none; } .lmq__track[aria-hidden="true"] { display: none; } } /* ================================================================= DIGITAL: "Onde acompanhar" (redes e newsletter). A seção do PlanningCast usa os estilos .yt (bloco TREINAMENTOS, acima). ================================================================= */ .chans { display: grid; gap: 12px; } .chan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 28px 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: box-shadow .3s var(--ease-io-quad), transform .4s var(--ease-io-circ); } .chan:hover, .chan:focus-visible { box-shadow: inset 0 0 0 1px var(--c), 0 18px 40px rgba(7, 20, 43, .1); transform: translateY(-3px); } .chan--yt { --c: #ff0000; } .chan--in { --c: #0a66c2; } .chan--ig { --c: #d6249f; } .chan--nl { --c: var(--blue); } .chan__ico { display: grid; place-items: center; width: 48px; height: 48px; background: var(--c); color: #fff; } .chan__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .chan__name { margin-top: 6px; font: 700 22px/1.2 var(--f-title); letter-spacing: -.3px; } .chan__desc { color: var(--muted); font-size: 15px; line-height: 1.5; text-wrap: pretty; } .chan__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--c); font: 700 12px/1 var(--f-label); letter-spacing: 1px; text-transform: uppercase; } .chan__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease-io-circ); } .chan:hover .chan__more svg { transform: translateX(4px); } @media (min-width: 700px) { .chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .chans { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Sem a chamada final (removida em 2026-10-23), páginas que terminam numa seção escura encostariam direto no rodapé escuro: uma linha fina marca a passagem */ main:has(> .sec--dark:last-child) + .site-footer { border-top: 1px solid rgba(243, 243, 243, .12); } /* PlanningCast: logo vetorizado (Imagens/youtube/planningcast-logo.svg) grande e bem claro no fundo da seção, à direita, só como textura (marca d'água). */ .yt { position: relative; overflow: hidden; overflow: clip; isolation: isolate; } .yt::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 50%; right: -4%; width: min(50vw, 820px); aspect-ratio: 1440 / 1480; transform: translateY(-50%); background: url("../Imagens/youtube/planningcast-logo.svg") center / contain no-repeat; opacity: .05; } @media (max-width: 999px) { .yt::before { top: 0; right: -20%; width: 90vw; transform: none; } } /* ================================================================= GERENCIAMENTO DE PROJETOS (2026-10-23, v2): conteúdo do cliente com a linguagem visual do site: movimento, profundidade e imagem real. Interações em js/gp.js. ================================================================= */ /* Topo: selos PMI e CREA-MG */ .gp-selos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .gp-selos li { display: flex; align-items: center; height: 56px; padding: 8px 14px; background: #fff; } .gp-selos img { display: block; height: 40px; width: auto; max-width: none; } /* ---------- 1. Equipe: as 8 frentes nos cartões azul-marinho da página Contato (.ct-card + .ct-chan, bloco CONTATO): ícone em quadro que acende no hover, número no canto, título e texto. Fundo de pontos da seção = .ct-main. O card de destino do menu (#fiscalizacao-tecnica etc.) fica aceso (:target). 2026-11-06. ---------- */ .gp-frentes { list-style: none; display: grid; gap: 12px; } .ct-chan.gp-fr { justify-content: flex-start; gap: 28px; min-height: 100%; padding: 24px 22px 26px; scroll-margin-top: 120px; } .gp-fr__num { font: 500 13px/1.4 var(--f-label); letter-spacing: 1.04px; color: var(--blue-soft); font-variant-numeric: tabular-nums; } .gp-fr .ct-chan__body strong { font-size: 21px; overflow-wrap: normal; text-wrap: balance; } main .gp-fr .ct-chan__body > span:last-child { font-size: 15px; line-height: 1.5; text-align: left; hyphens: manual; text-wrap: pretty; } .gp-fr:hover, .gp-fr:target, .js-reveal .gp-frentes .gp-fr.is-in:hover, .js-reveal .gp-frentes .gp-fr.is-in:target { border-color: rgba(153, 197, 255, .7); transform: translateY(-3px); box-shadow: 0 36px 64px -28px rgba(14, 118, 255, .7); } /* depois de entrar na tela, o hover responde rápido (a entrada usa .9s) */ .js-reveal .gp-frentes .gp-fr.is-in { transition: border-color .3s var(--ease-io-quad), box-shadow .3s var(--ease-io-quad), transform .3s var(--ease-io-quad); } .gp-fr:hover::after, .gp-fr:target::after { opacity: 1; } .gp-fr:hover .ct-chan__ico, .gp-fr:target .ct-chan__ico { color: #fff; background: var(--logo-blue); box-shadow: 0 0 0 6px rgba(14, 118, 255, .16), 0 0 28px rgba(14, 118, 255, .55); } /* o .reveal da página também define transition: soma a sombra sem perder a entrada */ .js-reveal .gp-frentes .reveal { transition: opacity .7s var(--ease-io-quad), transform .9s var(--ease-out-circ), box-shadow .35s var(--ease-io-quad); transition-delay: var(--d, 0s), var(--d, 0s), 0s; } /* cards claros só com ícone (Engenharia Digital, .ed-frentes): regras antigas, sem afetar os cartões .gp-fr */ .gp-frentes > li:not(.gp-fr) { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 28px 24px 26px; background: var(--bg-light); scroll-margin-top: 120px; transition: box-shadow .35s var(--ease-io-quad); } .gp-frentes > li:not(.gp-fr)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out-circ); } .gp-frentes > li:not(.gp-fr):hover, .gp-frentes > li:not(.gp-fr):target { box-shadow: 0 18px 36px -22px rgba(7, 20, 43, .35); } .gp-frentes > li:not(.gp-fr):hover::before, .gp-frentes > li:not(.gp-fr):target::before { transform: none; } .gp-frentes__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .gp-frentes__ico { display: grid; place-items: center; width: 52px; height: 52px; background: rgba(14, 118, 255, .1); transition: background .35s var(--ease-io-quad); } .gp-frentes__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s var(--ease-io-quad); } .gp-frentes > li:not(.gp-fr):hover .gp-frentes__ico, .gp-frentes > li:not(.gp-fr):target .gp-frentes__ico { background: var(--blue); } .gp-frentes > li:hover .gp-frentes__ico svg, .gp-frentes > li:target .gp-frentes__ico svg { stroke: #fff; } .gp-frentes__num { font: 500 13px/1.4 var(--f-label); letter-spacing: 1.04px; color: var(--blue); font-variant-numeric: tabular-nums; } .gp-frentes > li:not(.gp-fr) b { font: 700 19px/1.25 var(--f-title); letter-spacing: -.2px; text-wrap: balance; } .gp-frentes > li:not(.gp-fr) > span:last-child { color: var(--muted); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; } @media (min-width: 700px) { .gp-frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gp-frentes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Gerenciamento de Projetos, "Especialistas à frente do seu projeto" (2026-11-07): de volta aos cards claros, refinados: branco com borda fina sobre o fundo de pontos, linha tracejada entre ícone e texto, barra azul + leve subida no hover/:target */ .gp-frentes--claro { gap: 16px; } .gp-frentes--claro > li:not(.gp-fr) { gap: 12px; padding: 26px 24px 28px; background: #fff; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .1), 0 1px 2px rgba(7, 20, 43, .04); transition: box-shadow .35s var(--ease-io-quad), transform .35s var(--ease-io-quad); } .gp-frentes--claro .gp-frentes__top { margin-bottom: 10px; padding-bottom: 20px; background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .18) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .gp-frentes--claro .gp-frentes__ico { width: 48px; height: 48px; } .gp-frentes--claro .gp-frentes__num { color: var(--logo-blue); } .gp-frentes--claro > li:not(.gp-fr) b { font-size: 20px; color: var(--navy); } .gp-frentes--claro > li:not(.gp-fr):hover, .gp-frentes--claro > li:not(.gp-fr):target, .js-reveal .gp-frentes--claro > li.is-in:hover, .js-reveal .gp-frentes--claro > li.is-in:target { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .35), 0 24px 44px -24px rgba(7, 20, 43, .35); } .js-reveal .gp-frentes--claro > li.is-in { transition: box-shadow .35s var(--ease-io-quad), transform .35s var(--ease-io-quad); } @media (prefers-reduced-motion: reduce) { .gp-frentes--claro > li:hover, .gp-frentes--claro > li:target { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .gp-frentes > li, .gp-frentes > li::before { transition: none; } } @keyframes gp-fill { to { width: 100%; } } /* ---------- 2. Planejamento: foto noturna + fases que acendem com a rolagem ---------- */ .gp-plan { position: relative; overflow: hidden; overflow: clip; isolation: isolate; } .gp-plan__bg { position: absolute; inset: 0; z-index: -1; } .gp-plan__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; opacity: .5; } .gp-plan__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 15, .96) 0%, rgba(2, 6, 15, .72) 40%, rgba(2, 6, 15, .84) 75%, #02060f 100%); } .gp-fases { --p: 0; position: relative; list-style: none; display: grid; gap: 12px; } .gp-fases__line { display: none; } .gp-fases__item { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; background: rgba(8, 20, 42, .7); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .4; transform: translateY(14px); transition: opacity .7s var(--ease-io-quad), transform .9s var(--ease-out-circ), box-shadow .6s; } .gp-fases__item.is-on { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .28), 0 24px 48px -24px rgba(14, 118, 255, .45); } .gp-fases__head { display: flex; align-items: center; gap: 14px; } .gp-fases__pin { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; color: rgba(243, 243, 243, .7); background: rgba(243, 243, 243, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .16); transition: background-color .6s, color .6s, box-shadow .6s; } .gp-fases__item.is-on .gp-fases__pin { color: #fff; background: var(--logo-blue); box-shadow: 0 0 0 6px rgba(14, 118, 255, .16), 0 0 28px rgba(14, 118, 255, .55); } .gp-fases__pin svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .gp-fases__num { font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue-soft); } .gp-fases__title { font: 700 20px/1.2 var(--f-title); letter-spacing: -.2px; color: #fff; } .gp-fases .checklist li { color: rgba(243, 243, 243, .82); } @media (min-width: 700px) { .gp-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gp-fases { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* linha do 1º ao 5º pino (centro do pino: 22px de respiro + 26px), preenchida pela rolagem */ .gp-fases__line { display: block; position: absolute; z-index: 2; top: 48px; left: 48px; right: calc((100% - 48px) / 5 - 48px + 26px); height: 2px; background: repeating-linear-gradient(90deg, rgba(120, 170, 255, .35) 0 6px, transparent 6px 12px); pointer-events: none; } .gp-fases__line i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--logo-blue), var(--blue)); box-shadow: 0 0 12px rgba(14, 118, 255, .8); } .gp-fases__item { position: relative; } .gp-fases__pin { position: relative; z-index: 3; } } .gp-tools { display: grid; margin-top: 12px; background: rgba(8, 20, 42, .7); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gp-tools__label { display: flex; align-items: center; padding: 18px 22px; background: var(--logo-blue); color: #fff; font: 700 13px/1.35 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; } .gp-tools ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gp-tools li { display: grid; gap: 4px; align-content: start; padding: 18px 22px; box-shadow: inset -1px 0 0 rgba(243, 243, 243, .08), inset 0 -1px 0 rgba(243, 243, 243, .08); } .gp-tools strong { font: 700 16px/1.25 var(--f-title); color: #fff; } .gp-tools span { font-size: 14px; line-height: 1.4; color: rgba(243, 243, 243, .66); } @media (min-width: 900px) { .gp-tools { grid-template-columns: 200px 1fr; } .gp-tools ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1300px) { .gp-tools ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ---------- 3. Interação entre os processos: gráfico com cursor de tempo ---------- */ .gp-curvas { display: grid; gap: 12px; } .gp-curvas__legenda { list-style: none; display: grid; gap: 8px; } .gp-curvas__legenda button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 12px; align-items: start; width: 100%; height: 100%; padding: 16px 18px; border: 0; text-align: left; cursor: pointer; background: #fff; color: inherit; font: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: box-shadow .3s var(--ease-io-quad); } .gp-curvas__legenda i { width: 10px; height: 10px; margin-top: .45em; background: var(--c); } .gp-curvas__legenda strong { display: block; font: 700 16px/1.3 var(--f-title); } .gp-curvas__legenda small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); } .gp-curvas__val { font: 700 20px/1.2 var(--f-title); color: var(--c); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; opacity: 0; transition: opacity .4s; } .gp-curvas__meter { grid-column: 1 / -1; height: 3px; background: rgba(7, 20, 43, .07); opacity: 0; transition: opacity .4s; } .gp-curvas__meter em { display: block; height: 100%; width: var(--v, 0%); background: var(--c); } .gp-curvas.is-live .gp-curvas__val, .gp-curvas.is-live .gp-curvas__meter { opacity: 1; } .gp-curvas__legenda button:hover, .gp-curvas__legenda button:focus-visible, .gp-curvas__legenda button.is-on { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px rgba(0, 0, 0, .06); } .gp-curvas__legenda button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .gp-curvas__fig { position: relative; display: grid; place-items: center; padding: 48px 16px 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); cursor: ew-resize; touch-action: pan-y; } .gp-curvas__now { position: absolute; top: 16px; right: 20px; display: flex; align-items: baseline; gap: 10px; opacity: 0; transition: opacity .4s; } .gp-curvas__now span { font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--muted); } .gp-curvas__now b { font: 700 22px/1 var(--f-title); color: var(--blue); font-variant-numeric: tabular-nums; } .gp-curvas.is-live .gp-curvas__now { opacity: 1; } .gp-curvas__fig svg { width: 100%; height: auto; overflow: visible; } .gp-curvas__grid line { stroke: rgba(7, 20, 43, .08); stroke-width: 1; } .gp-curvas__ax { fill: none; stroke: var(--black); stroke-width: 1.6; stroke-linejoin: round; } .gp-curvas__t { font: 600 15px var(--f-title); fill: var(--black); } .gp-curvas__past { fill: rgba(14, 118, 255, .05); opacity: 0; transition: opacity .4s; } .gp-curvas__cursor { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s; } .gp-curvas__dot { stroke: #fff; stroke-width: 3; opacity: 0; transition: opacity .25s; } .gp-curvas:not(.is-live) .gp-curvas__dot { opacity: 0 !important; } .gp-curvas.is-live .gp-curvas__past, .gp-curvas.is-live .gp-curvas__cursor { opacity: 1; } .gp-curvas__c { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s, stroke-width .3s; } .gp-curvas.has-on .gp-curvas__c, .gp-curvas.has-on .gp-curvas__dot:not(.is-on) { opacity: .14; } .gp-curvas.has-on .gp-curvas__c.is-on { opacity: 1; stroke-width: 5.5; } /* as curvas se desenham ao entrar na tela, uma depois da outra (traço com pathLength=1) */ .js-reveal .gp-curvas .gp-curvas__c { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out-circ) calc(.25s + var(--i) * .22s), opacity .3s, stroke-width .3s; } .js-reveal .gp-curvas.is-in .gp-curvas__c { stroke-dashoffset: 0; } @media (min-width: 1000px) { .gp-curvas { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; } } /* ---------- 4. Métodos: fundo escuro, celular 3D e galeria ---------- */ .gp-met { position: relative; overflow: hidden; overflow: clip; background: radial-gradient(70% 50% at 70% 18%, rgba(14, 74, 173, .35), transparent 70%), radial-gradient(60% 40% at 15% 85%, rgba(14, 118, 255, .14), transparent 70%), #02050c; color: #fff; } .gp-met .sec__intro { color: rgba(243, 243, 243, .7); } /* App de campo */ .gp-app { display: grid; gap: 32px; align-items: center; margin-bottom: 72px; } .gp-app__copy > .eyebrow { display: block; margin-bottom: 12px; color: var(--blue-soft); } .gp-app__title { font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--f-title); letter-spacing: -.02em; color: #fff; max-width: 20ch; } .gp-app__list { list-style: none; display: grid; gap: 6px; margin: 28px 0; } .gp-app__copy > .gp-app__list:first-child { margin-top: 0; } /* Gerenciamento de Projetos: lista sem título acima */ .gp-app__list button { display: grid; width: 100%; padding: 14px 18px; border: 0; text-align: left; cursor: pointer; color: #fff; font: inherit; background: rgba(243, 243, 243, .04); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .08); transition: background-color .35s var(--ease-io-quad), box-shadow .35s var(--ease-io-quad); } .gp-app__list button:hover { background: rgba(243, 243, 243, .07); } .gp-app__list button[aria-pressed="true"] { background: rgba(14, 118, 255, .14); box-shadow: inset 3px 0 0 var(--blue), inset 0 0 0 1px rgba(120, 170, 255, .3); } .gp-app__list button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .gp-app__tab { font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue-soft); } .gp-app__list strong { margin-top: 2px; font: 700 17px/1.3 var(--f-title); } .gp-app__desc { max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.45; color: rgba(243, 243, 243, .7); transition: max-height .5s var(--ease-out-circ), opacity .35s, margin .5s var(--ease-out-circ); } .gp-app__list button[aria-pressed="true"] .gp-app__desc { max-height: 90px; opacity: 1; margin-top: 4px; } .gp-app__stage { position: relative; display: grid; place-items: center; height: 600px; perspective: 1600px; } /* o aparelho: frente (tela), verso e bordas; gira inteiro no eixo vertical */ .gp-phone { --rx: 0deg; --ry: 0deg; position: relative; z-index: 1; width: 268px; aspect-ratio: 268 / 548; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) - 16deg)) rotateZ(2deg); transition: transform .8s var(--ease-out-circ); animation: gp-float 7s ease-in-out infinite; } @keyframes gp-float { 50% { translate: 0 -14px; } } .gp-phone--static { animation: none; } /* sem flutuar nem girar (todas as páginas com o celular, 2026-11-03); a inclinação fixa fica */ .gp-phone__body { position: absolute; inset: 0; transform-style: preserve-3d; } .gp-phone__face { position: absolute; inset: 0; border-radius: 44px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .gp-phone__face--front { padding: 10px; background: linear-gradient(145deg, #3a414d, #12161d 55%, #2a3039); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .9); transform: translateZ(6px); } .gp-phone__face--front::after { content: ""; position: absolute; top: 20px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 20px; background: #000; } .gp-phone__screen { display: block; width: 100%; height: 100%; border-radius: 35px; object-fit: cover; object-position: top; background: #0b1020; } .gp-phone__face--back { display: grid; place-items: center; background: linear-gradient(150deg, #2e3644 0%, #151a23 50%, #262d38 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); transform: rotateY(180deg) translateZ(6px); } .gp-phone__cam { position: absolute; top: 22px; left: 22px; display: grid; grid-template-columns: repeat(2, 30px); gap: 6px; padding: 10px; border-radius: 26px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .gp-phone__cam i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b4a7a, #05080e 60%); box-shadow: inset 0 0 0 3px #222831; } .gp-phone__cam i:nth-child(3) { grid-column: 1; } .gp-phone__logo { width: 46%; opacity: .9; } .gp-phone__logo img { display: block; width: 100%; height: auto; } .gp-phone__edge { position: absolute; top: 46px; bottom: 46px; width: 12px; background: linear-gradient(90deg, #1c2129, #4a5260, #1c2129); } .gp-phone__edge--l { left: -6px; transform: rotateY(-90deg); } .gp-phone__edge--r { right: -6px; transform: rotateY(90deg); } .gp-phone__floor { position: absolute; bottom: 30px; left: 50%; width: 260px; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 118, 255, .35), transparent); filter: blur(6px); } @media (min-width: 1000px) { .gp-app { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; margin-bottom: 120px; } .gp-app__stage { height: 720px; } .gp-phone { width: 310px; } } /* Galeria (referência: "Get the highlights" de apple.com/airpods-pro) */ .gp-gal { --cw: min(1180px, 88vw); width: 100vw; margin-left: calc(50% - 50vw); } .gp-gal__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 8px calc((100vw - var(--cw)) / 2) 12px; outline: none; } .gp-gal__track::-webkit-scrollbar { display: none; } .gp-gal__card { flex: 0 0 var(--cw); display: grid; scroll-snap-align: center; cursor: pointer; background: linear-gradient(160deg, rgba(20, 34, 62, .9), rgba(6, 12, 24, .95)); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); opacity: .38; transform: scale(.95); transition: opacity .7s var(--ease-io-quad), transform .9s var(--ease-out-circ); } .gp-gal__card.is-active { opacity: 1; transform: none; cursor: default; } .gp-gal__media { position: relative; display: grid; place-items: center; min-height: 320px; padding: 24px; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, rgba(14, 74, 173, .35), transparent 75%); } .gp-gal__copy { padding: 28px 24px 32px; } .gp-gal__copy > .eyebrow { display: block; margin-bottom: 10px; color: var(--blue-soft); } .gp-gal__title { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--f-title); letter-spacing: -.015em; color: #fff; } .gp-gal__steps { list-style: none; display: grid; gap: 4px; margin-top: 22px; } .gp-gal__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 12px 0; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .16) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-io-quad), transform .7s var(--ease-out-circ); } .gp-gal__card.is-active .gp-gal__steps li { opacity: 1; transform: none; } .gp-gal__card.is-active .gp-gal__steps li:nth-child(2) { transition-delay: .1s; } .gp-gal__card.is-active .gp-gal__steps li:nth-child(3) { transition-delay: .2s; } .gp-gal__card.is-active .gp-gal__steps li:nth-child(4) { transition-delay: .3s; } .gp-gal__steps b { grid-row: span 2; font: 700 13px/1.5 var(--f-title); color: var(--blue-soft); font-variant-numeric: tabular-nums; } .gp-gal__steps strong { font: 700 16px/1.3 var(--f-title); color: #fff; } .gp-gal__steps span { margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: rgba(243, 243, 243, .66); text-align: left; } .gp-gal__nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; } .gp-gal__dots { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; background: rgba(243, 243, 243, .08); } .gp-gal__dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: rgba(243, 243, 243, .4); transition: width .5s var(--ease-out-circ), background-color .3s; } .gp-gal__dots button[aria-current] { width: 44px; background: rgba(243, 243, 243, .22); } .gp-gal__dots button i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; } .gp-gal__dots button[aria-current] i { width: 100%; } .gp-gal__dots button.is-run i { width: 0; animation: gp-fill 7.6s linear forwards; } .gp-gal__play { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; color: #fff; background: rgba(243, 243, 243, .08); transition: background-color .3s; } .gp-gal__play:hover { background: rgba(243, 243, 243, .16); } .gp-gal__play svg { width: 18px; height: 18px; fill: currentColor; } .gp-gal__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; color: #fff; background: rgba(243, 243, 243, .08); transition: background-color .3s; } .gp-gal__arrow:hover { background: var(--blue); } .gp-gal__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease-io-circ); } .gp-gal__arrow[data-step="1"]:hover svg { transform: translateX(3px); } .gp-gal__arrow[data-step="-1"]:hover svg { transform: translateX(-3px); } .gp-gal__play[data-playing="true"] .gp-gal__ico-play, .gp-gal__play[data-playing="false"] .gp-gal__ico-pause { display: none; } .gp-gal__dots button:focus-visible, .gp-gal__play:focus-visible, .gp-gal__arrow:focus-visible, .gp-gal__track:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (min-width: 1000px) { .gp-gal__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 600px; } .gp-gal__media { padding: 48px; } .gp-gal__copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 48px 48px 8px; } } /* Last Planner: quadro lookahead animado (as restrições abertas viram "livres") */ .gp-la { width: 100%; max-width: 640px; padding: 22px; background: rgba(5, 12, 26, .8); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1), 0 30px 60px -30px rgba(0, 0, 0, .8); } .gp-la__head, .gp-la__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; } .gp-la__head { margin-bottom: 10px; font: 500 11px/1.3 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--blue-soft); } .gp-la__head > span:first-child { grid-column: 1 / -1; margin-bottom: 8px; font-size: 12px; color: #fff; } .gp-la__weeks { grid-column: 2; display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; color: rgba(243, 243, 243, .6); } .gp-la__weeks i { font-style: normal; } .gp-la__row + .gp-la__row { margin-top: 6px; } .gp-la__disc { padding: 9px 10px; font: 700 13px/1.2 var(--f-title); background: rgba(243, 243, 243, .06); } .gp-la__lane { position: relative; height: 34px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), rgba(243, 243, 243, .08) calc(100% / 6 - 1px) calc(100% / 6)); } .gp-la__bar { position: absolute; top: 5px; bottom: 5px; left: calc((var(--s) - 1) / 6 * 100% + 3px); width: calc(var(--n) / 6 * 100% - 6px); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out-circ) calc(var(--k) * 60ms); } .gp-la__bar--livre { background: #0aa355; } .gp-la__bar--prog { background: var(--blue); } .gp-la__bar--restr { background: #f5a524; } .gp-la__bar--sem { background: #6f7f99; } .gp-gal__card.is-active .gp-la__bar { transform: none; } .gp-gal__card.is-active .gp-la__bar--restr { animation: gp-la-free .5s var(--ease-io-quad) forwards; animation-delay: calc(2.2s + var(--k) * 180ms); } @keyframes gp-la-free { to { background-color: #0aa355; box-shadow: 0 0 16px rgba(10, 163, 85, .6); } } .gp-la__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 12.5px; color: rgba(243, 243, 243, .75); } .gp-la__key span { display: flex; align-items: center; gap: 8px; background: none; } .gp-la__key span::before { content: ""; width: 10px; height: 10px; background: currentColor; } .gp-la__k--livre::before { background: #0aa355 !important; } .gp-la__k--prog::before { background: var(--blue) !important; } .gp-la__k--restr::before { background: #f5a524 !important; } .gp-la__k--sem::before { background: #6f7f99 !important; } /* textos curtos dos cards escuros e da galeria: alinhados à esquerda (o justificado abriria buracos) */ .gp-falhas__destaques li p, .gp-gal__steps li span, .gp-app__list .gp-app__desc { text-align: left; hyphens: manual; } /* Construtibilidade: 3 conjuntos em sequência */ .gp-seq { position: relative; width: 100%; max-width: 640px; } .gp-seq img { display: block; width: 100%; height: auto; aspect-ratio: 553 / 420; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); } .gp-seq img + img { position: absolute; top: 0; left: 0; } .gp-seq img { opacity: 0; transition: opacity .9s var(--ease-io-quad); } .gp-seq img.is-on, .gp-seq img:first-child:not(.is-on):only-child { opacity: 1; } .gp-seq img:first-child { position: relative; } .gp-seq__cap { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font-size: 14px; color: rgba(243, 243, 243, .7); } .gp-seq__cap b { color: #fff; font-family: var(--f-title); } /* AWP: visualizador + cadeia de pacotes que entra em sequência */ .gp-awp { position: relative; width: 100%; } .gp-awp img { display: block; width: 100%; height: auto; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); } .gp-awp__chain { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 12px; } .gp-awp__chain li { position: relative; display: grid; gap: 2px; padding: 10px 12px; font-size: 13px; color: rgba(255, 255, 255, .85); background: var(--logo-blue); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease-out-circ); } .gp-awp__chain li:nth-child(2) { background: var(--blue); } .gp-awp__chain li:nth-child(3) { background: #0aa355; } .gp-awp__chain li:nth-child(4) { background: #3a4a63; } .gp-awp__chain b { font: 700 16px/1.2 var(--f-title); color: #fff; } .gp-gal__card.is-active .gp-awp__chain li { opacity: 1; transform: none; } .gp-gal__card.is-active .gp-awp__chain li:nth-child(2) { transition-delay: .25s; } .gp-gal__card.is-active .gp-awp__chain li:nth-child(3) { transition-delay: .5s; } .gp-gal__card.is-active .gp-awp__chain li:nth-child(4) { transition-delay: .75s; } /* BIM 4D: modelo "construído" da esquerda para a direita (--b de 0 a 1, js/gp.js) */ .gp-4d { --b: 0; width: 100%; } .gp-4d__model { position: relative; aspect-ratio: 1334 / 802; } .gp-4d__model img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .gp-4d__ghost { filter: grayscale(1) brightness(2.2); opacity: .14; } .gp-4d__built { clip-path: inset(-2% calc((1 - var(--b)) * 100%) -2% -2%); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); } .gp-4d__model::after { content: ""; position: absolute; top: 4%; bottom: 4%; left: calc(var(--b) * 100%); width: 2px; background: linear-gradient(transparent, var(--blue), transparent); box-shadow: 0 0 18px 4px rgba(14, 118, 255, .55); opacity: calc(1 - var(--b) * var(--b) * var(--b)); } .gp-4d__hud { margin-top: 16px; padding: 16px 18px; background: rgba(5, 12, 26, .8); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .gp-4d__hud p { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgba(243, 243, 243, .75); } .gp-4d__hud b { font: 700 18px var(--f-title); color: #fff; font-variant-numeric: tabular-nums; } .gp-4d__track { display: block; height: 4px; margin-top: 12px; background: rgba(243, 243, 243, .12); } .gp-4d__track i { display: block; height: 100%; width: calc(var(--b) * 100%); background: linear-gradient(90deg, #0aa355, var(--blue)); } .gp-4d__ticks { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px var(--f-label); color: rgba(243, 243, 243, .45); } .gp-4d__ticks i { font-style: normal; } /* Power BI: dois painéis flutuando em perspectiva */ .gp-bi { position: relative; width: 100%; aspect-ratio: 16 / 12; perspective: 1400px; } /* 2026-11-06: painel Power BI ao vivo no notebook (.gpr-nb.ed-nb) no lugar das imagens + botão de tela cheia */ .gp-bi-live { width: 100%; max-width: 760px; } .gp-bi-cta { margin-top: 28px; } .gp-bi img { position: absolute; display: block; height: auto; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform 1.2s var(--ease-out-circ), opacity .9s; } .gp-bi__b { width: 74%; right: 0; top: 0; transform: rotateY(-16deg) translateZ(-40px); opacity: .55; } .gp-bi__a { width: 64%; left: 0; bottom: 0; transform: rotateY(14deg) translateZ(0); } .gp-gal__card.is-active .gp-bi__a { animation: gp-bi-a 7.6s var(--ease-io-quad) infinite; } .gp-gal__card.is-active .gp-bi__b { animation: gp-bi-b 7.6s var(--ease-io-quad) infinite; } @keyframes gp-bi-a { 0%, 100% { transform: rotateY(14deg) translateY(0); } 50% { transform: rotateY(8deg) translateY(-10px); } } @keyframes gp-bi-b { 0%, 100% { transform: rotateY(-16deg) translateZ(-40px); opacity: .55; } 50% { transform: rotateY(-10deg) translateZ(-10px) translateY(8px); opacity: .85; } } /* App interativo completo (diálogo) */ .gp-dlg { width: min(420px, 94vw); height: min(780px, 92vh); padding: 0; border: 0; overflow: visible; background: transparent; } .gp-dlg::backdrop { background: rgba(2, 5, 12, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gp-dlg iframe { display: block; width: 100%; height: 100%; border: 0; } .gp-dlg__close { position: absolute; top: -12px; right: -12px; z-index: 1; width: 40px; height: 40px; border: 0; cursor: pointer; font: 400 26px/1 var(--f-title); color: #fff; background: var(--logo-blue); } /* ---------- 5. Por que os projetos falham ---------- */ .gp-falhas { display: grid; gap: 12px; } .gp-falhas__destaques { list-style: none; display: grid; gap: 12px; } .gp-falhas__destaques li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b2b66 0%, #07142b 55%, #02060f 100%); } .gp-falhas__n { font: 700 48px/1 var(--f-title); letter-spacing: -.03em; color: var(--blue-soft); font-variant-numeric: tabular-nums; min-width: 2.6ch; } .gp-falhas__destaques strong { display: block; font: 700 18px/1.25 var(--f-title); } .gp-falhas__destaques p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: rgba(243, 243, 243, .72); } .gp-falhas__destaques .gp-falhas__resp { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; color: #fff; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .2) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .gp-falhas__resp::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .5em; background: var(--blue-soft); } .gp-barras { padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .gp-barras figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 16px; margin-bottom: 12px; background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .2) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .gp-barras figcaption strong { font: 700 18px/1.3 var(--f-title); } .gp-barras figcaption span { font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--muted); } .gp-barras ol { list-style: none; display: grid; gap: 10px; } .gp-barras li { display: grid; gap: 6px; } .gp-barras__l { font-size: 14.5px; line-height: 1.35; text-align: left; } .gp-barras li.is-hot .gp-barras__l { font-weight: 700; } .gp-barras__b { display: flex; align-items: center; gap: 8px; height: 22px; } .gp-barras__b i { display: block; height: 100%; width: calc(var(--v) * .86); background: #c6d3e8; } .gp-barras li.is-hot .gp-barras__b i { background: linear-gradient(90deg, var(--logo-blue), var(--blue)); } .gp-barras__b em { font: 700 14px/1 var(--f-title); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; } .gp-barras li.is-hot .gp-barras__b em { color: var(--blue); } .js-reveal .gp-barras .gp-barras__b i { width: 0; } .js-reveal .gp-barras.is-in .gp-barras__b i { width: calc(var(--v) * .86); transition: width 1.1s var(--ease-out-circ) calc(.2s + var(--i) * .05s); } @media (min-width: 700px) { .gp-barras li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 14px; } .gp-barras__l { text-align: right; } } @media (min-width: 1000px) { .gp-falhas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .gp-barras { padding: 28px 32px; } } /* Movimento reduzido: nada gira nem flutua; quadros no estado final */ @media (prefers-reduced-motion: reduce) { .gp-phone { animation: none; } .gp-fases__item, .gp-gal__card, .gp-gal__steps li, .gp-awp__chain li { transition: none; transform: none; } .gp-la__bar { transition: none; transform: none; } .gp-gal__card .gp-la__bar--restr { animation: none; } .gp-bi img { animation: none !important; } } /* Gerenciamento de Projetos: malha de Segmentos ao fundo do topo, planta 3D por cima */ .page-hero--plant > .page-hero__media { background: #02060f; } .gp-hero-mesh { z-index: 0; } .page-hero--plant .plant3d { z-index: 1; } /* a malha fica mais apagada e some atrás da planta 3D, para a animação não disputar com ela */ .gp-hero-mesh { opacity: .55; } .gp-hero-mesh::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(42% 60% at 74% 55%, rgba(2, 6, 15, .92) 0%, rgba(2, 6, 15, .7) 55%, transparent 100%); } /* Planejamento (2026-10-23): no lugar da linha reta, uma luz percorre a borda de um card de cada vez, em sequência (js/gp.js, classe .is-lit). Todos os cards ficam visíveis o tempo todo. */ @property --gp-a { syntax: ''; inherits: false; initial-value: 0deg; } .gp-fases__line { display: none !important; } .gp-fases__item { position: relative; opacity: 1; transform: none; transition: box-shadow .6s, background-color .6s; } .gp-fases__item::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1.5px; pointer-events: none; opacity: 0; background: conic-gradient(from var(--gp-a), transparent 0 58%, rgba(120, 170, 255, .25) 70%, #0e76ff 86%, #b9d6ff 93%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: opacity .6s var(--ease-io-quad); } .gp-fases__item.is-lit::before { opacity: 1; animation: gp-orbit 2.6s linear infinite; } @keyframes gp-orbit { to { --gp-a: 360deg; } } .gp-fases__item.is-lit { background: rgba(10, 30, 66, .85); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .2), 0 28px 56px -26px rgba(14, 118, 255, .55); } .gp-fases__item.is-on .gp-fases__pin { color: rgba(243, 243, 243, .7); background: rgba(243, 243, 243, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .16); } .gp-fases__item.is-lit .gp-fases__pin { color: #fff; background: var(--logo-blue); box-shadow: 0 0 0 6px rgba(14, 118, 255, .16), 0 0 28px rgba(14, 118, 255, .55); } @media (prefers-reduced-motion: reduce) { .gp-fases__item::before { display: none; } } /* ================================================================= IMPLANTAÇÃO E REESTRUTURAÇÃO DE PCM (2026-10-23): conteúdo do HTML-modelo do cliente (Downloads/Planning_PCM_pagina_site_v3_Rev.html) com a linguagem visual do site: movimento, profundidade e imagem real. Interações em js/pcm.js. ================================================================= */ .pcm-lead { font: 500 clamp(21px, 2vw, 28px)/1.3 var(--f-title); letter-spacing: -.3px; max-width: 36ch; text-wrap: pretty; } .pcm-h4 { margin-bottom: 6px; font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue); } .pcm-intro-wide { max-width: 72ch; } .pcm-note { margin-top: 28px; } /* barra de progresso das abas que avançam sozinhas ([data-auto] em js/pcm.js) */ .pcm-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; } .pcm-prog i { display: block; height: 100%; width: 0; background: var(--blue); } [aria-selected="true"] > .pcm-prog i { width: 100%; } .is-run > .pcm-prog i { width: 0; animation: gp-fill var(--dur, 6s) linear forwards; } [data-auto] [role="tabpanel"]:not([hidden]) { animation: pcm-in .6s var(--ease-out-circ) both; } [data-auto] [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @keyframes pcm-in { from { opacity: 0; transform: translateY(12px); } } @keyframes pcm-fade { from { opacity: 0; } } @keyframes pcm-spin { to { transform: rotate(360deg); } } @keyframes pcm-march { to { stroke-dashoffset: -20; } } /* ---------- 1. Soluções: seletor + ilustração em camadas ---------- */ .pcm-of__switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; } .pcm-of__switch button { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--black); background: var(--bg-light); transition: background-color .35s var(--ease-io-quad), color .35s; } .pcm-of__switch b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; font: 700 13px var(--f-title); color: #fff; background: var(--blue); } .pcm-of__switch button + button b { background: #0aa355; } .pcm-of__switch span { font: 700 13px/1.3 var(--f-label); letter-spacing: 1.04px; } .pcm-of__switch button:hover { background: #e9eef6; } .pcm-of__switch button[aria-selected="true"] { color: #fff; background: var(--navy); } .pcm-of__switch button + button[aria-selected="true"] { background: #0b2c2c; } .pcm-of__panel { display: grid; background: var(--bg-light); } .pcm-of__vis { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 16px; overflow: hidden; background: linear-gradient(165deg, #0a1830 0%, #0f3270 100%); } .pcm-of__panel--g .pcm-of__vis { background: linear-gradient(165deg, #0c1f33 0%, #0e5a47 100%); } .pcm-of__vis::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); } .pcm-iso { position: relative; display: block; width: 100%; max-width: 360px; height: auto; max-height: 640px; overflow: visible; font-family: var(--f-title); } .pcm-of__body { display: flex; flex-direction: column; gap: 24px; padding: 28px 24px 32px; } .pcm-of__text { max-width: 62ch; font-size: 17px; line-height: 1.55; color: rgba(0, 0, 0, .78); } .pcm-of__hl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 18px 20px; background: #fff; box-shadow: inset 3px 0 0 var(--blue); } .pcm-of__hl p { flex: 1 1 240px; font: 700 19px/1.35 var(--f-title); color: var(--logo-blue); text-align: left; } .pcm-of__panel--g .pcm-of__hl { box-shadow: inset 3px 0 0 #0aa355; } .pcm-of__panel--g .pcm-of__hl p { color: #0a7a41; } .pcm-tiles { list-style: none; display: grid; column-gap: 28px; } .pcm-tiles__i { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 14px 0; background: var(--h-dash) left bottom / 100% 1px no-repeat; } .pcm-tiles__i svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; background: var(--logo-blue); stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pcm-of__panel--g .pcm-tiles__i svg { background: #0b7f3f; } .pcm-tiles__i b { font: 700 16px/1.3 var(--f-title); } .pcm-tiles__i span { margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-align: left; } /* as camadas descem e se encaixam, de baixo para cima; depois flutuam de leve */ .js-reveal .pcm-of.is-in [role="tabpanel"]:not([hidden]) .pcm-iso__lay { animation: pcm-drop 1s var(--ease-out-circ) calc(.15s + var(--i) * .22s) both, pcm-bob 6s ease-in-out calc(1.4s + var(--i) * .5s) infinite; } .js-reveal .pcm-of.is-in [role="tabpanel"]:not([hidden]) .pcm-iso__link { animation: pcm-fade .7s ease 1.1s both; } .js-reveal .pcm-of.is-in [role="tabpanel"]:not([hidden]) .pcm-tiles__i { animation: pcm-in .6s var(--ease-out-circ) both; } .pcm-tiles__i:nth-child(2) { animation-delay: .05s !important; } .pcm-tiles__i:nth-child(3) { animation-delay: .1s !important; } .pcm-tiles__i:nth-child(4) { animation-delay: .15s !important; } .pcm-tiles__i:nth-child(5) { animation-delay: .2s !important; } .pcm-tiles__i:nth-child(6) { animation-delay: .25s !important; } .pcm-tiles__i:nth-child(7) { animation-delay: .3s !important; } .pcm-tiles__i:nth-child(8) { animation-delay: .35s !important; } @keyframes pcm-drop { from { opacity: 0; transform: translateY(-70px); } } @keyframes pcm-bob { 50% { transform: translateY(-8px); } } @media (min-width: 700px) { .pcm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pcm-of__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .pcm-of__vis { padding: 40px 32px; } .pcm-of__body { justify-content: center; padding: 48px; } } @media (max-width: 599px) { .pcm-of__switch { grid-template-columns: 1fr; } .pcm-iso { max-width: 250px; } } /* ---------- 2. Papéis: 4 cards no formato dos cards de soluções da home (.svc, style.css). O desenho de cada modelo fica numa moldura clara no topo, no lugar da foto. ---------- */ .pcm-papc { list-style: none; display: grid; gap: 12px; } .pcm-papc__i { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); } .pcm-papc__i .svc__link { padding: 20px; gap: 12px; min-height: 0; } .pcm-papc__media { display: grid; place-items: center; padding: 18px 22px; background: radial-gradient(80% 70% at 50% 45%, #eaf2ff 0%, var(--bg-light) 75%); } .pcm-papc__media::after { display: none; } .pcm-papc__media svg { display: block; width: 100%; height: 100%; font-family: var(--f-title); transition: transform .9s var(--ease-out-circ); } .pcm-papc__i .svc__link:hover .pcm-papc__media svg { transform: scale(1.04); } .pcm-papc__i .svc__title { font-size: 22px; } main .pcm-papc__i .svc__desc { font-size: 15px; text-align: left; hyphens: manual; } @media (min-width: 700px) { .pcm-papc { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .pcm-papc { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @keyframes pcm-pop { from { opacity: 0; transform: scale(.3); } } /* ---------- 3. Macrofluxo ---------- */ .pcm-mfsec .sec__intro { max-width: 64ch; } .pcm-mf__hint { display: none; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); } .pcm-mf__scroll { overflow-x: auto; background: rgba(2, 6, 15, .75); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1), 0 30px 60px -30px rgba(0, 0, 0, .8); scrollbar-width: thin; } .pcm-mf__scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .pcm-mf__in { min-width: 980px; } .pcm-mf__svg { display: block; width: 100%; height: auto; font-family: var(--f-title); } .pcm-mf__hd { fill: rgba(14, 74, 173, .5); } .pcm-mf__sep { stroke: rgba(243, 243, 243, .14); stroke-width: 1; stroke-dasharray: 4 4; } .pcm-mf__p { fill: none; stroke-width: 2; } .pcm-mf__svg text { font-size: 10.5px; font-weight: 700; fill: #fff; } .pcm-mf__svg text.is-d { fill: #10182e; } .pcm-mf__svg text.is-s { font-size: 9.5px; } .pcm-mf__svg .pcm-mf__yn { font-size: 11px; font-weight: 800; } .pcm-mf__svg .pcm-mf__ht { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; } .pcm-mf__strat { fill: #0b2b66; stroke: rgba(120, 170, 255, .6); } .pcm-mf__brace { fill: none; stroke: #fff; stroke-width: 1.6; } .pcm-mf__tok { stroke: #fff; stroke-width: 2; } /* o diagrama entra coluna por coluna */ .js-reveal .pcm-mf .pcm-mf__c { opacity: 0; transition: opacity .6s var(--ease-io-quad) calc(.25s + var(--c) * .14s); } .js-reveal .pcm-mf.is-in .pcm-mf__c { opacity: 1; } .pcm-mf.is-done .pcm-mf__c { transition-delay: 0s; transition-duration: .3s; } /* legenda: destaca um caminho e apaga os outros */ .pcm-mf[data-on] .pcm-mf__svg .pcm-mf__c[data-k] { opacity: .14; } .pcm-mf[data-on="cor"] .pcm-mf__svg .pcm-mf__c[data-k~="cor"], .pcm-mf[data-on="mel"] .pcm-mf__svg .pcm-mf__c[data-k~="mel"], .pcm-mf[data-on="sis"] .pcm-mf__svg .pcm-mf__c[data-k~="sis"], .pcm-mf[data-on="exe"] .pcm-mf__svg .pcm-mf__c[data-k~="exe"] { opacity: 1; } .pcm-mf[data-on] .pcm-mf__tok { visibility: hidden; } .pcm-mf[data-on="cor"] .pcm-mf__tok[data-k="cor"], .pcm-mf[data-on="mel"] .pcm-mf__tok[data-k="mel"], .pcm-mf[data-on="sis"] .pcm-mf__tok[data-k="sis"] { visibility: visible; } .pcm-mf__leg { list-style: none; display: grid; gap: 4px; margin-top: 12px; } .pcm-mf__leg button { display: flex; align-items: flex-start; gap: 12px; width: 100%; height: 100%; padding: 14px 16px; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 14.5px; line-height: 1.45; color: rgba(243, 243, 243, .78); background: rgba(243, 243, 243, .04); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .08); transition: background-color .3s, color .3s, box-shadow .3s; } .pcm-mf__leg i { flex: none; width: 14px; height: 14px; margin-top: .2em; } .pcm-mf__leg button:hover, .pcm-mf__leg button[aria-pressed="true"] { color: #fff; background: rgba(14, 118, 255, .14); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .35); } .pcm-mf__leg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (max-width: 1000px) { .pcm-mf__hint { display: block; } } @media (min-width: 900px) { .pcm-mf__leg { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- 4. Diagnóstico de maturidade ---------- */ .pcm-mat { display: grid; gap: 40px; } .pcm-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; padding-top: 28px; } .pcm-scale__lv { position: relative; display: flex; flex-direction: column; min-height: var(--h); padding: 16px 12px; color: #fff; transform-origin: bottom; box-shadow: 0 16px 32px -18px rgba(7, 20, 43, .5); transition: translate .35s var(--ease-out-circ); } .pcm-scale__lv:nth-child(1) { background: linear-gradient(160deg, #9aa9c2, #7f8faa); } .pcm-scale__lv:nth-child(2) { background: linear-gradient(160deg, #6f8ec0, #55739f); } .pcm-scale__lv:nth-child(3) { background: linear-gradient(160deg, #3f78d6, #2a5db0); } .pcm-scale__lv:nth-child(4) { background: linear-gradient(160deg, #1c7cff, #0058d6); } .pcm-scale__lv:nth-child(5) { background: linear-gradient(160deg, #0b1b33, #16325e); } .pcm-scale__lv:hover { translate: 0 -6px; } .pcm-scale__lv b { font: 700 30px/1 var(--f-title); } .pcm-scale__lv > div { margin-top: auto; line-height: 1.35; } .pcm-scale__lv strong { display: block; margin: 8px 0 4px; font: 700 14px/1.25 var(--f-title); } .pcm-scale__lv span { font-size: 13px; opacity: .92; } .pcm-scale__lv.is-meta { box-shadow: 0 0 0 2px #dce5f2, 0 0 0 4px var(--blue), 0 20px 40px -16px rgba(14, 118, 255, .7); } .pcm-scale__lv.is-meta::before { content: "META"; position: absolute; top: -26px; left: 0; font: 700 11px/1 var(--f-label); letter-spacing: .16em; color: var(--blue); } .js-reveal .pcm-scale .pcm-scale__lv { transform: scaleY(.06); transition: transform 1s var(--ease-out-circ) calc(var(--i) * .12s), translate .35s var(--ease-out-circ); } .js-reveal .pcm-scale.is-in .pcm-scale__lv { transform: none; } .js-reveal .pcm-scale .pcm-scale__lv > *, .js-reveal .pcm-scale .is-meta::before { opacity: 0; transition: opacity .5s var(--ease-io-quad) calc(.7s + var(--i) * .12s); } .js-reveal .pcm-scale.is-in .pcm-scale__lv > *, .js-reveal .pcm-scale.is-in .is-meta::before { opacity: 1; } .pcm-scale__note { max-width: 62ch; margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--muted); } .pcm-steps { list-style: none; display: grid; } .pcm-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 14px 0; } .pcm-steps li::after { content: ""; position: absolute; left: 21px; top: 62px; bottom: -14px; width: 2px; background: repeating-linear-gradient(180deg, rgba(7, 20, 43, .25) 0 4px, transparent 4px 8px); } .pcm-steps li:last-child::after { display: none; } .pcm-steps i { display: grid; place-items: center; width: 44px; height: 44px; font: 700 16px var(--f-title); font-style: normal; color: var(--blue); background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); transition: background-color .5s, color .5s, box-shadow .5s; } .pcm-steps li.is-lit i { color: #fff; background: var(--logo-blue); box-shadow: 0 0 0 6px rgba(14, 118, 255, .16), 0 0 24px rgba(14, 118, 255, .45); } .pcm-steps b { display: block; font: 700 18px/1.3 var(--f-title); } .pcm-steps span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-align: left; } .pcm-rd { display: grid; gap: 4px; margin-top: 56px; } .pcm-radar { margin: 0; padding: 24px 16px 18px; background: #fff; } .pcm-radar__svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; font-family: var(--f-title); } .pcm-radar__grow { transform-origin: 210px 170px; } .js-reveal .pcm-radar .pcm-radar__grow { transform: scale(0); transition: transform 1.5s var(--ease-out-circ) .35s; } .js-reveal .pcm-radar.is-in .pcm-radar__grow { transform: none; } .pcm-radar__meta { animation: pcm-march 1.4s linear infinite; } .pcm-radar__pt { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease-out-circ); } .pcm-radar__lb { transition: fill .3s; } .pcm-rd .pcm-radar__pt.is-on { transform: scale(1.9); } .pcm-rd .pcm-radar__lb.is-on { fill: var(--blue); } .pcm-radar figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 8px; font-size: 13.5px; color: var(--muted); } .pcm-radar figcaption span { display: flex; align-items: center; gap: 7px; } .pcm-radar figcaption i { display: inline-block; width: 14px; height: 4px; } .pcm-radar figcaption i.m { background: repeating-linear-gradient(90deg, #f5a524 0 5px, transparent 5px 8px); } .pcm-radar figcaption em { width: 100%; font-size: 12px; font-style: normal; text-align: center; color: #7f93ad; } .pcm-pil { list-style: none; display: grid; align-content: center; background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .2) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .pcm-pil li { background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .2) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .pcm-pil button { --c: var(--blue); display: grid; align-content: start; gap: 4px; width: 100%; padding: 20px 20px 20px 24px; border: 0; cursor: pointer; text-align: left; font: inherit; background: none; box-shadow: inset 3px 0 0 var(--c); transition: box-shadow .35s var(--ease-out-circ), background-color .35s; } .pcm-pil li:nth-child(2) button { --c: #0aa355; } .pcm-pil li:nth-child(3) button { --c: #f5a524; } .pcm-pil li:nth-child(4) button { --c: #26508f; } .pcm-pil button:hover, .pcm-pil button:focus-visible, .pcm-pil button.is-on { background: rgba(255, 255, 255, .7); box-shadow: inset 7px 0 0 var(--c); outline: none; } .pcm-pil b { font: 700 19px/1.25 var(--f-title); } .pcm-pil span { font-size: 15px; line-height: 1.45; color: var(--muted); text-align: left; } @media (min-width: 1000px) { .pcm-mat { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; } .pcm-rd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; } .pcm-radar { padding: 36px 32px 24px; } } @media (max-width: 599px) { .pcm-scale { grid-template-columns: 1fr; padding-top: 0; } .pcm-scale__lv { min-height: 0; flex-direction: row; align-items: center; gap: 14px; transform-origin: left; } .pcm-scale__lv > div { margin-top: 0; } .pcm-scale__lv strong { margin: 0; } .pcm-scale__lv.is-meta::before { display: none; } .js-reveal .pcm-scale .pcm-scale__lv { transform: scaleX(.06); } } /* ---------- 5. Método: trilha das 4 fases ---------- */ .pcm-ph__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .pcm-ph__track button { position: relative; display: grid; gap: 4px; padding: 18px 20px 20px; border: 0; cursor: pointer; text-align: left; font: inherit; color: rgba(7, 20, 43, .55); background: var(--bg-light); transition: background-color .35s var(--ease-io-quad), color .35s; } .pcm-ph__track small { font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; color: var(--blue); } .pcm-ph__track strong { font: 700 16px/1.2 var(--f-title); letter-spacing: .04em; } .pcm-ph__track button:hover { color: var(--black); background: #e9eef6; } .pcm-ph__track button[aria-selected="true"] { color: #fff; background: var(--navy); } .pcm-ph__track button[aria-selected="true"] small { color: var(--blue-soft); } .pcm-ph__track .pcm-prog { height: 3px; } .pcm-ph__panel { display: grid; margin-top: 4px; background: var(--bg-light); } .pcm-ph__do { padding: 28px 24px; } .pcm-when { display: inline-block; margin-bottom: 16px; padding: 4px 10px; font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--logo-blue); background: rgba(14, 118, 255, .1); } .pcm-ph__title { max-width: 26ch; font: 700 clamp(23px, 2.2vw, 30px)/1.15 var(--f-title); letter-spacing: -.4px; text-wrap: balance; } .pcm-ph__t { max-width: 60ch; margin: 10px 0 24px; font-size: 16.5px; line-height: 1.5; color: var(--muted); } .pcm-ph__get { padding: 28px 24px; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b2b66 0%, #07142b 55%, #02060f 100%); } .pcm-ph__get .pcm-h4 { color: var(--blue-soft); } .pcm-get { list-style: none; display: grid; margin-top: 10px; } .pcm-get li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; font-size: 16.5px; line-height: 1.4; text-align: left; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .16) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .pcm-get svg { width: 28px; height: 28px; padding: 6px; background: #0aa355; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .pcm-ph__panel:not([hidden]) .pcm-get li { animation: pcm-in .6s var(--ease-out-circ) both; } .pcm-get li:nth-child(1) { animation-delay: .2s !important; } .pcm-get li:nth-child(2) { animation-delay: .35s !important; } .pcm-get li:nth-child(3) { animation-delay: .5s !important; } @media (min-width: 1000px) { .pcm-ph__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pcm-ph__do, .pcm-ph__get { padding: 44px 48px; } } @media (max-width: 700px) { .pcm-ph__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- 6. Fluxo do PCM: linha das 5 etapas ---------- */ .pcm-flow { --k: 0; } .pcm-flow__line { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; } .pcm-flow__rail { position: absolute; top: 28px; left: calc(100% / (var(--n) * 2)); right: calc(100% / (var(--n) * 2)); height: 2px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(120, 170, 255, .35) 0 6px, transparent 6px 12px); } .pcm-flow__rail i { display: block; height: 100%; width: calc(var(--k) / (var(--n) - 1) * 100%); background: linear-gradient(90deg, var(--logo-blue), var(--blue)); box-shadow: 0 0 12px rgba(14, 118, 255, .8); transition: width .9s var(--ease-io-circ); } .pcm-flow__rail em { position: absolute; z-index: 2; top: 50%; left: calc(var(--k) / (var(--n) - 1) * 100%); width: 20px; height: 20px; translate: -50% -50%; background: #fff; box-shadow: 0 0 0 7px rgba(14, 118, 255, .28), 0 0 28px rgba(120, 170, 255, .9); transition: left .9s var(--ease-io-circ); } .pcm-flow__line button { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 6px 22px; border: 0; cursor: pointer; text-align: center; font: inherit; color: rgba(243, 243, 243, .55); background: none; transition: color .35s; } .pcm-flow__node { position: relative; z-index: 1; width: 28px; height: 28px; margin-bottom: 12px; background: #0b1a33; box-shadow: inset 0 0 0 2px rgba(120, 170, 255, .45); transition: background-color .5s, box-shadow .5s; } .pcm-flow__line button.is-past .pcm-flow__node { background: var(--logo-blue); box-shadow: inset 0 0 0 2px rgba(120, 170, 255, .7); } .pcm-flow__line small { font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; color: var(--blue-soft); } .pcm-flow__line strong { font: 700 15px/1.2 var(--f-title); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; } .pcm-flow__line button:hover, .pcm-flow__line button[aria-selected="true"] { color: #fff; } .pcm-flow__line .pcm-prog { left: 18%; right: 18%; } .pcm-flow__panel { display: grid; gap: 28px; margin-top: 20px; padding: 28px 24px; background: rgba(8, 20, 42, .7); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .pcm-flow__q { margin-bottom: 8px; font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue-soft); } .pcm-flow__title { margin-bottom: 12px; font: 700 clamp(24px, 2.4vw, 32px)/1.15 var(--f-title); letter-spacing: -.4px; color: #fff; } .pcm-flow__main > p:last-child { font-size: 16.5px; line-height: 1.55; color: rgba(243, 243, 243, .75); } .pcm-flow__col .pcm-h4 { color: var(--blue-soft); } .pcm-flow__col .checklist li { color: rgba(243, 243, 243, .88); } .pcm-flow__col.is-g .checklist li::before { background: #0aa355; } @media (min-width: 1000px) { .pcm-flow__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: 44px; padding: 40px 44px; } } /* celular: só os números na linha (o nome da etapa aparece no painel logo abaixo) */ @media (max-width: 700px) { .pcm-flow__line strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pcm-flow__line small { font-size: 13px; } .pcm-flow__main > p:last-child { font-size: 15.5px; } } /* ---------- 7. Tecnologia: diário de bordo + Power BI ---------- */ .pcm-tc { display: grid; gap: 40px; align-items: center; } .pcm-tc__list { list-style: none; display: grid; margin-top: 28px; } .pcm-tc__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 0; background: var(--h-dash) left bottom / 100% 1px no-repeat; } .pcm-tc__list i { display: grid; place-items: center; width: 34px; height: 34px; background: var(--logo-blue); } .pcm-tc__list svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pcm-tc__list b { display: block; font: 700 17px/1.3 var(--f-title); } .pcm-tc__list span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-align: left; } .pcm-tc__stage { position: relative; display: grid; justify-items: center; } .pcm-tc__glow { position: absolute; inset: 4% 0 14%; background: radial-gradient(circle at 50% 42%, rgba(14, 118, 255, .3), transparent 68%); pointer-events: none; } .pcm-tc__stage .gacat-mock { position: relative; animation: gp-float 7s ease-in-out infinite; } .pcm-tc__hint { position: relative; max-width: 320px; margin-top: 4px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--muted); } .pcm-bi { margin-top: 96px; } .pcm-bi__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; } .pcm-bi__head .eyebrow { display: block; margin-bottom: 12px; color: var(--muted); } .pcm-bi__title { font: 700 clamp(24px, 2.6vw, 34px)/1.1 var(--f-title); letter-spacing: -.5px; } .pcm-bi__head p { max-width: 70ch; margin-top: 10px; color: var(--muted); } .pcm-bi__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -30px rgba(7, 20, 43, .4); } .pcm-bi__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* (2026-11-06) removida a .pcm-bi__mask: o retângulo escuro no canto da tela cobria o logo da Planning do painel atual */ @media (min-width: 1000px) { .pcm-tc { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } } @media (max-width: 700px) { .pcm-bi__frame { aspect-ratio: 4 / 5; } } /* ---------- 8. Como ajudamos: o "antes" é riscado e a solução entra ---------- */ .pcm-ah { list-style: none; display: grid; column-gap: 48px; background: var(--h-dash) left top / 100% 1px no-repeat; } .pcm-ah__i { padding: 22px 0 26px; background: var(--h-dash) left bottom / 100% 1px no-repeat; } .pcm-ah__antes { display: block; font: 500 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: #d95926; } .pcm-ah__antes s { position: relative; text-decoration: none; } .pcm-ah__antes s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: currentColor; transform-origin: left; } .pcm-ah__now { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; margin-top: 14px; } .pcm-ah__ico svg { display: block; width: 46px; height: 46px; padding: 11px; background: var(--logo-blue); stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pcm-ah__now h3 { font: 700 19px/1.25 var(--f-title); letter-spacing: -.2px; } .pcm-ah__now p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-align: left; } .js-reveal .pcm-ah__i .pcm-ah__antes s::after { transform: scaleX(0); transition: transform .5s var(--ease-io-quad) calc(var(--d, 0s) * .5 + .15s); } .js-reveal .pcm-ah__i.is-in .pcm-ah__antes s::after { transform: none; } .js-reveal .pcm-ah__i .pcm-ah__now { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease-io-quad) calc(var(--d, 0s) * .5 + .3s), transform .6s var(--ease-out-circ) calc(var(--d, 0s) * .5 + .3s); } .js-reveal .pcm-ah__i.is-in .pcm-ah__now { opacity: 1; transform: none; } .pcm-ah__box { display: grid; margin-top: 56px; overflow: hidden; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b2b66 0%, #07142b 55%, #02060f 100%); } .pcm-ah__boxtext { align-self: center; padding: 32px 24px; } .pcm-ah__boxtext h3 { max-width: 18ch; font: 700 clamp(26px, 3vw, 42px)/1.08 var(--f-title); letter-spacing: -.6px; text-wrap: balance; } .pcm-ah__boxtext p { max-width: 56ch; margin-top: 18px; font-size: 17px; line-height: 1.55; color: rgba(243, 243, 243, .75); } .pcm-ah__pic { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; } .pcm-ah__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 2.4s var(--ease-out-circ); } .js-reveal .pcm-ah__box:not(.is-in) .pcm-ah__pic img { transform: scale(1.1); } @media (min-width: 800px) { .pcm-ah { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .pcm-ah { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pcm-ah__box { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pcm-ah__boxtext { padding: 64px 56px; } .pcm-ah__pic { aspect-ratio: auto; min-height: 460px; } .pcm-ah__pic img { position: absolute; inset: 0; } } /* ---------- 9. Normas e registro: selos com anel girando ---------- */ .pcm-seals { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .pcm-seals li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px 28px; text-align: center; background: #fff; transition: box-shadow .35s; } .pcm-seals li:hover { box-shadow: 0 18px 36px -20px rgba(7, 20, 43, .35); } .pcm-seal { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 14px; } .pcm-seal::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed rgba(14, 118, 255, .55); border-radius: 50%; animation: pcm-spin 24s linear infinite; } .pcm-seals li:hover .pcm-seal::before { animation-duration: 5s; } .pcm-seal i { display: grid; place-content: center; width: 106px; height: 106px; border-radius: 50%; font: 800 19px/1.1 var(--f-title); font-style: normal; color: #fff; background: linear-gradient(155deg, #0a5bd6, #0846a8); box-shadow: 0 12px 28px -8px rgba(4, 70, 168, .45); } .pcm-seal--crea i { background: linear-gradient(155deg, #16263f, #26508f); } .pcm-seal--crea::before { border-color: rgba(38, 80, 143, .6); } .pcm-seal i small { display: block; margin-top: 4px; font: 700 11px var(--f-label); letter-spacing: .12em; opacity: .85; } .pcm-seals b { font: 700 17px/1.3 var(--f-title); } .pcm-seals li > span:last-child { font-size: 14.5px; color: var(--muted); } @media (min-width: 1000px) { .pcm-seals { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 420px) { .pcm-seal { width: 104px; height: 104px; } .pcm-seal i { width: 84px; height: 84px; font-size: 15px; } } /* ---------- Diário de bordo (protótipo do cliente; textos e lógica intactos) ---------- */ .gacat-mock{--navy:#0a2a66;--blue:#1565e0;--blue-l:#e8f0ff;--green:#1f9d55;--green-l:#e3f6ea;--amber:#f59e0b;--amber-l:#fff3d6;--red:#d92d20;--red-l:#fde8e6;--ink:#14213d;--mut:#5b6b88;--line:#dbe3f2; font-family:var(--f-title);color:var(--ink);display:flex;justify-content:center;padding:16px;box-sizing:border-box} .gacat-mock *{box-sizing:border-box} .gacat-mock .gm-phone{width:300px;height:620px;background:#0b1220;border-radius:42px;padding:10px;box-shadow:0 20px 44px rgba(10,42,102,.4);position:relative;flex:none} .gacat-mock .gm-screen{width:100%;height:100%;border-radius:32px;background:#f5f7fc;overflow:hidden;display:flex;flex-direction:column;position:relative} .gacat-mock .gm-status{display:flex;justify-content:space-between;padding:10px 20px 4px;font-size:11px;font-weight:700;color:#fff;background:var(--navy);flex:none} .gacat-mock .gm-bar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 14px 12px;font-weight:600;font-size:15px;flex:none} .gacat-mock .gm-bar button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:0 4px;line-height:1} .gacat-mock .gm-bar .gm-logo{margin-left:auto} .gacat-mock .gm-content{flex:1;overflow:auto;padding:12px;font-size:12.5px} .gacat-mock .gm-login{height:100%;display:flex;flex-direction:column;color:#fff;background:#06214f url("../Imagens/solucoes/pcm-pagina/diario-login.jpg") center/cover no-repeat} .gacat-mock .gm-login .gm-status{background:transparent} .gacat-mock .gm-brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-top:30px;text-align:center} .gacat-mock .gm-brand .t1{font-size:22px;font-weight:500;letter-spacing:.2px;line-height:1} .gacat-mock .gm-brand .t2{font-size:15px;font-weight:600;margin-top:-6px} .gacat-mock .gm-menu{padding:16px 16px 22px;display:flex;flex-direction:column;gap:8px} .gacat-mock .gm-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px} .gacat-mock .gm-user{color:var(--ink);display:flex;gap:10px;align-items:center;background:rgba(248,249,252,.96);border-radius:10px} .gacat-mock .gm-user small{color:var(--mut);display:block;line-height:1.35} .gacat-mock .gm-btn{width:100%;border:0;border-radius:8px;padding:11px;font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;background:var(--blue);color:#fff;margin-top:8px} .gacat-mock .gm-menu .gm-btn{margin-top:0} .gacat-mock .gm-btn.sec{background:#fff;color:var(--blue);border:1.5px solid var(--blue)} .gacat-mock .gm-btn.gh{background:#f8f9fc;color:var(--navy);border:1px solid var(--line)} .gacat-mock .gm-btn:disabled{background:#b9c4da;color:#fff;border-color:transparent;cursor:not-allowed} .gacat-mock .gm-h{font-weight:700;font-size:12.5px;margin:8px 0 6px} .gacat-mock .gm-date{text-align:center;color:var(--mut);margin-bottom:6px;font-size:12px} .gacat-mock .gm-act{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px;cursor:pointer} .gacat-mock .gm-ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;font-weight:700;background:#9aa8c4} .gacat-mock .gm-ic.Cumprida{background:var(--green)}.gacat-mock .gm-ic.Pendente{background:var(--amber)}.gacat-mock .gm-ic.Desvio{background:var(--red)} .gacat-mock .gm-act span.t{flex:1;line-height:1.2}.gacat-mock .gm-act small{color:var(--mut);display:block} .gacat-mock .gm-pill{font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px} .gacat-mock .gm-pill.Cumprida{background:var(--green-l);color:var(--green)}.gacat-mock .gm-pill.Pendente{background:var(--amber-l);color:#b45309}.gacat-mock .gm-pill.Desvio{background:var(--red-l);color:var(--red)} .gacat-mock label{display:block;font-weight:600;font-size:12px;margin:8px 0 3px} .gacat-mock label i{color:var(--red);font-style:normal} .gacat-mock select,.gacat-mock input,.gacat-mock textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:12.5px;background:#fff;color:var(--ink)} .gacat-mock textarea{min-height:60px;resize:none} .gacat-mock .gm-row{display:flex;gap:8px;margin-top:8px}.gacat-mock .gm-row>*{flex:1;margin-top:0} .gacat-mock .gm-err{color:var(--red);font-size:11.5px;margin-top:6px;min-height:14px} .gacat-mock .gm-ok{color:var(--mut)} .gacat-mock .gm-sum{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid var(--line)} .gacat-mock .gm-lock{text-align:center;padding-top:10px} .gacat-mock .gm-lock .big{width:60px;height:60px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:26px;margin:0 auto 8px} .gacat-mock .gm-hist{display:flex;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid var(--line);cursor:pointer} .gacat-mock .gm-tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px} .gacat-mock .Aberto{background:var(--blue-l);color:var(--blue)}.gacat-mock .Fechado{background:#e6e9f0;color:#33415c}.gacat-mock .Reaberto{background:var(--amber-l);color:#b45309} .gacat-mock .gm-prog{height:6px;border-radius:4px;background:#e3e9f5;overflow:hidden;margin-top:5px}.gacat-mock .gm-prog b{display:block;height:100%;background:var(--green)} .gacat-mock .gm-toast{position:absolute;left:12px;right:12px;bottom:14px;background:var(--navy);color:#fff;border-radius:8px;padding:9px 12px;font-size:12px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:5} .gacat-mock .gm-toast.show{opacity:1;transform:none} @media(max-width:340px){.gacat-mock .gm-phone{transform:scale(.85);transform-origin:top center;margin-bottom:-90px}} .gacat-mock { padding: 16px 16px 24px; } .gacat-mock .gm-phone { background: linear-gradient(145deg, #3a414d, #12161d 55%, #2a3039); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(7, 20, 43, .6); } .gacat-mock .gm-logo { display: block; height: auto; } .gacat-mock .gm-brand .gm-logo { margin-bottom: 4px; } @media (prefers-reduced-motion: reduce) { .pcm-tc__stage .gacat-mock, .pcm-seal::before, .pcm-radar__meta { animation: none; } .pcm-mf__tok { display: none; } [data-auto] [role="tabpanel"]:not([hidden]), .pcm-ph__panel .pcm-get li { animation: none; } .pcm-flow__rail i, .pcm-flow__rail em { transition: none; } } /* PCM: no fundo branco, o corpo das abas ganha o cinza claro para não sumir */ #diagnostico-de-manutencao .views__body { background: var(--bg-light); } /* PCM: painel Power BI dentro de um notebook 3D (2026-10-23, pedidos do usuário). Notebook montado como objeto 3D de verdade (tampa e base com espessura, laterais, teclado, trackpad e sombra). O trecho fica preso na tela ([data-mac-pin]); começa FECHADO, pequeno e de frente (só a borda) e, com a rolagem, dá uma volta completa (360°) enquanto abre e cresce, até ficar de frente e todo aberto (em 50% do trecho). js/pcm.js, bloco 6. Medidas em função da largura --w (px, definida no JS). Abaixo de 700px fica só a tela. */ @media (min-width: 701px) { /* trecho de largura total e com corte (contain: paint): nada do 3D vaza para as outras seções. overflow: hidden quebraria o sticky; contain: paint não. */ .pcm-mac-pin { position: relative; height: 220vh; margin-top: 24px; width: 100vw; margin-left: calc(50% - 50vw); contain: paint; isolation: isolate; } /* fora da tela o notebook nem é desenhado (evita o navegador pintar a tampa gigante em outro lugar) */ .pcm-mac-pin:not(.is-near) .pcm-mac__body { display: none; } .pcm-mac-stage { position: sticky; top: calc(var(--header-h) + 16px); height: calc(100vh - var(--header-h) - 32px); display: grid; align-items: center; } .pcm-mac { --w: 1200px; --H: calc(var(--w) * .598); --D: calc(var(--w) * .6 * var(--dk, 1)); --tb: calc(var(--w) * .017); --tl: calc(var(--w) * .007); --o: 1; --sc: 1; --rx: 0deg; --ry: 0deg; --ty: 0px; position: relative; left: 50%; width: min(92vw, 1640px, (100vh - var(--header-h) - 130px) * 1.6); translate: -50% 0; transform-style: flat; perspective: 4200px; perspective-origin: 50% 42%; } .pcm-mac__body { position: relative; height: calc(var(--H) + var(--tb)); transform-style: preserve-3d; transform-origin: 50% var(--H) calc(var(--D) / 2); transform: translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc)); } .pcm-mac__body * { box-sizing: border-box; } .pcm-mac__body i { position: absolute; display: block; } /* ---- tampa ---- */ .pcm-mac__lid { position: absolute; top: 0; left: 0; width: 100%; height: var(--H); transform-style: preserve-3d; transform-origin: 50% 100%; transform: translateY(-1px) rotateX(calc((1 - var(--o)) * -89.5deg)); } .pcm-mac__front { position: absolute; inset: 0; padding: calc(var(--w) * .026) calc(var(--w) * .018) calc(var(--w) * .03); border-radius: calc(var(--w) * .016) calc(var(--w) * .016) 0 0; background: #090a0c; box-shadow: inset 0 0 0 1.5px #3b3f46, inset 0 0 0 4px #090a0c; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pcm-mac__front::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--w) * .02); background: linear-gradient(180deg, #1b1d21, #2a2d33); } /* "queixo" */ .pcm-mac__cam { top: calc(var(--w) * .01); left: 50%; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b4a7a, #05070b 65%); box-shadow: 0 0 0 1.5px #1c1f25; } .pcm-mac__screen.pcm-bi__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; box-shadow: none; background: #0f1420; } .pcm-mac__screen iframe { opacity: calc((var(--o) - .8) * 5); } .pcm-mac:not(.is-open) .pcm-mac__screen iframe { pointer-events: none; } /* tampa por fora: alumínio cinza-espacial com o logo da Planning */ .pcm-mac__back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(var(--w) * .016) calc(var(--w) * .016) 0 0; background: linear-gradient(160deg, #5b6069 0%, #3c4048 45%, #2c2f35 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transform: translateZ(calc(var(--tl) * -1)) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pcm-mac__back img { width: 17%; height: auto; } .pcm-mac__ltop { top: 0; left: 0; width: 100%; height: var(--tl); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(90deg, #24272c, #4a4e56 50%, #24272c); border-radius: 3px; } .pcm-mac__lside { top: calc(var(--w) * .01); width: var(--tl); height: calc(var(--H) - var(--w) * .01); background: linear-gradient(180deg, #4a4e56, #2a2d33); } .pcm-mac__lside--l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); } .pcm-mac__lside--r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); } /* ---- base ---- */ .pcm-mac__base { position: absolute; top: var(--H); left: 0; width: 100%; height: 0; transform-style: preserve-3d; } .pcm-mac__base > i { left: 0; } .pcm-mac__deck { top: 0; width: 100%; height: var(--D); transform-origin: 50% 0; transform: rotateX(90deg); border-radius: 0 0 calc(var(--w) * .02) calc(var(--w) * .02); background: linear-gradient(180deg, #2a2d33 0 2.2%, #50555e 2.2%, #464a52 60%, #3d4148 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pcm-mac__keys { top: 8%; left: 8.5%; right: 8.5%; height: 46%; border-radius: 4px; background: #34373d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); } .pcm-mac__keys::before { content: ""; position: absolute; inset: 1.2% .6%; background: repeating-linear-gradient(90deg, #0d0e11 0 calc(100% / 14 - 3px), transparent calc(100% / 14 - 3px) calc(100% / 14)); -webkit-mask: repeating-linear-gradient(180deg, #000 0 calc(100% / 6 - 3px), transparent calc(100% / 6 - 3px) calc(100% / 6)); mask: repeating-linear-gradient(180deg, #000 0 calc(100% / 6 - 3px), transparent calc(100% / 6 - 3px) calc(100% / 6)); } .pcm-mac__pad { top: 60%; left: 32%; width: 36%; height: 32%; border-radius: calc(var(--w) * .008); background: linear-gradient(180deg, #555a63, #4a4e56); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); } .pcm-mac__speaker { top: 8%; width: 6%; height: 46%; background: radial-gradient(circle, #1d1f24 35%, transparent 40%) 0 0 / 7px 7px; opacity: .8; } .pcm-mac__speaker--l { left: 1.2%; } .pcm-mac__speaker--r { right: 1.2%; } .pcm-mac__bottom { top: 0; width: 100%; height: var(--D); transform-origin: 50% 0; transform: translateY(var(--tb)) rotateX(90deg) rotateY(180deg); border-radius: 0 0 calc(var(--w) * .02) calc(var(--w) * .02); background: #2a2d33; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pcm-mac__bfront { top: 0; width: 100%; height: var(--tb); transform: translateZ(var(--D)); border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #6a6f78 0%, #4a4e56 40%, #2e3137 100%); } .pcm-mac__bfront::after { content: ""; position: absolute; top: 0; left: 50%; width: 12%; height: 40%; translate: -50% 0; border-radius: 0 0 8px 8px; background: #2a2d33; } /* encaixe para abrir a tampa */ .pcm-mac__bback { top: 0; width: 100%; height: var(--tb); transform: rotateY(180deg); background: linear-gradient(180deg, #4a4e56, #2a2d33); } .pcm-mac__bside { top: 0; width: var(--D); height: var(--tb); background: linear-gradient(180deg, #5a5f68, #2e3137); } .pcm-mac__bside--l { left: 0; transform-origin: 0 50%; transform: rotateY(-90deg); } .pcm-mac__base > .pcm-mac__bside--r { left: auto; right: 0; transform-origin: 100% 50%; transform: rotateY(90deg); } /* sombra no chão */ .pcm-mac__shadow { top: var(--H); left: -8% !important; width: 116%; height: calc(var(--D) * 1.15); transform-origin: 50% 0; transform: translateY(calc(var(--tb) + 2px)) rotateX(90deg) translateY(-6%); background: radial-gradient(50% 50% at 50% 50%, rgba(7, 20, 43, .32), rgba(7, 20, 43, .12) 45%, rgba(7, 20, 43, 0) 70%); } /* sem filter: blur (no Edge/Chrome com placa de vídeo o blur em 3D virava um retângulo cinza) */ } @media (max-width: 700px) { .pcm-mac__back, .pcm-mac__base, .pcm-mac__cam, .pcm-mac__ltop, .pcm-mac__lside { display: none; } } /* PCM: a barra "Nesta página" rola junto com a página (sem ficar presa no topo), a pedido do usuário */ .subnav--static { position: relative; top: auto; } /* ================================================================= REVISÃO DE TEXTOS JUSTIFICADOS (2026-10-23): texto corrido justificado em todo o site, inclusive as descrições curtas dos cards de Gerenciamento de Projetos e PCM (antes alinhadas à esquerda). Ficam de fora: títulos, rótulos, listas com marcador, frases de destaque e legendas centralizadas. ================================================================= */ main .sub-lead, main .cta-band__text, main .gp-falhas__resp, main .gp-falhas__destaques li p, main .gp-gal__steps li span, main .gp-app__list .gp-app__desc, main .pcm-lead, main .pcm-of__hlt, main .pcm-of__text, main .pcm-scale__note, main .pcm-ph__t, main .pcm-tiles__i span, main .pcm-steps span, main .pcm-tc__list span, main .pcm-ah__now p, main .pcm-pil span, main .pcm-flow__main > p, main .pcm-bi__head p, main .flow__box > span:not(.flow__tag) { text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } /* PCM: selos no topo (ISO 55000/55001/55002 + CREA-MG), no formato dos selos de Gerenciamento de Projetos */ .pcm-selos { margin-top: 20px; } .pcm-selo { display: flex; align-items: center; gap: 10px; } .pcm-selo i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 800 11px/1 var(--f-title); font-style: normal; letter-spacing: .04em; color: #fff; background: linear-gradient(155deg, #0a5bd6, #0846a8); } .pcm-selo b { font: 800 18px/1 var(--f-title); letter-spacing: -.01em; color: #16263f; } /* PCM: abertura de Soluções justificada sem buracos: coluna mais larga e fonte um pouco menor */ .pcm-lead { max-width: 58ch; font-size: clamp(19px, 1.7vw, 24px); } @media (min-width: 800px) { #solucoes > .wrap > .sec__head { grid-column: 1 / -1; } } .pcm-lead { max-width: 64ch; } /* ================================================================= PCM — PADRONIZAÇÃO DA TIPOGRAFIA (2026-10-23): mesma escala das demais páginas de solução (ref. gestao-de-paradas.html): rótulo 12px/700 · descrição 15px · texto de painel 16px · título de item 16–18px · título de bloco 20px (lista) ou 28px (painel) · abertura 19px ================================================================= */ /* rótulos em maiúsculas: iguais a .tabs__label */ .pcm-h4, .pcm-when, .pcm-flow__q { font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; } /* descrições curtas */ .pcm-tiles__i span, .pcm-steps span, .pcm-tc__list span, .pcm-ah__now p, .pcm-pil span, .pcm-mf__leg button, .pcm-seals li > span:last-child, .pcm-scale__note, .pcm-get li, .pcm-tc__hint { font-size: 15px; line-height: 1.45; } /* texto de painel */ .pcm-of__text, .pcm-ph__t, .pcm-flow__main > p:last-child, .pcm-ah__boxtext p, .pcm-bi__head p { font-size: 16px; line-height: 1.5; } /* títulos de item */ .pcm-tiles__i b { font-size: 16px; } .pcm-steps b, .pcm-tc__list b, .pcm-ah__now h3, .pcm-pil b, .pcm-seals b, .pcm-of__hlt { font-size: 18px; line-height: 1.25; letter-spacing: -.2px; } /* títulos de bloco */ .pcm-ph__title, .pcm-flow__title, .pcm-bi__title, .pcm-ah__boxtext h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.3px; } /* abertura de Soluções: mesmo tamanho da abertura do topo */ .pcm-lead { font: 500 19px/1.5 var(--f-title); letter-spacing: 0; max-width: 72ch; } .pcm-radar figcaption { font-size: 13px; } @media (max-width: 799px) { .pcm-ph__title, .pcm-flow__title, .pcm-bi__title, .pcm-ah__boxtext h3 { font-size: 24px; } .pcm-lead { font-size: 17px; } } .pcm-of__hl .pcm-of__hlt { font-size: 18px; line-height: 1.35; } .pcm-ah__antes { font-weight: 700; letter-spacing: 1.4px; } /* PCM: selos do topo sem o quadro branco (pedido 2026-10-23); CREA-MG maior, em versão negativa (texto branco, fundo transparente: Imagens/solucoes/pcm-pagina/crea-mg-negativo.png) */ .pcm-selos { align-items: center; gap: 12px 24px; margin-top: 28px; } .pcm-selos li { height: auto; padding: 0; background: none; } .pcm-selo b { color: #fff; } .pcm-selos .pcm-selos__crea img { height: 76px; } /* PCM: logo oficial da ISO (Imagens/solucoes/pcm-pagina/iso-logo.svg, Wikimedia Commons) no topo e em "Normas e registro" */ .pcm-selo img { display: block; width: auto; height: 44px; max-width: none; } .pcm-seal--iso i { gap: 6px; background: #fff; box-shadow: 0 12px 28px -10px rgba(7, 20, 43, .35), inset 0 0 0 1px rgba(7, 20, 43, .08); } .pcm-seal--iso img { width: 46px; height: auto; margin: 0 auto; } .pcm-seal--iso small { margin-top: 0; font: 800 15px/1 var(--f-title); letter-spacing: 0; color: #16263f; opacity: 1; } .pcm-seal--iso i small { margin-top: 0; font: 800 15px/1 var(--f-title); letter-spacing: 0; color: #16263f; opacity: 1; } .pcm-seal--crealogo img { width: 72px; } .pcm-seal--crealogo::before { border-color: rgba(38, 80, 143, .6); } /* Gerenciamento de Projetos: só 2 selos (PMI e CREA-MG), lado a lado no centro */ .pcm-seal--pmi img { width: 84px; } .pcm-seal--prince img { width: 54px; } /* 5 selos (Gerenciamento de Projetos): uma linha só no computador */ @media (min-width: 1000px) { .pcm-seals--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pcm-seals--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; } } /* PCM: abertura de Soluções com o mesmo estilo dos títulos (.sec__title: 700, espaçamento negativo), um nível abaixo */ .pcm-lead { font: 700 clamp(22px, 2.3vw, 30px)/1.22 var(--f-title); letter-spacing: -.5px; max-width: 54ch; color: var(--black); } @media (max-width: 799px) { .pcm-lead { font-size: 21px; letter-spacing: -.3px; } } /* PCM: abertura de Soluções = título de seção do site (.sec__title: 30px/40px, 700, -0.6px/-1px), justificada */ .pcm-lead { font: 700 30px/1.08 var(--f-title); letter-spacing: -.6px; max-width: 46ch; color: var(--black); } @media (min-width: 800px) { .pcm-lead { font-size: 40px; letter-spacing: -1px; } } /* PCM — Soluções: as duas formas de atuação empilhadas (sem abas), 2026-10-23. Cada uma com cabeçalho próprio; a 02 com a ilustração à direita. */ .pcm-of { display: grid; gap: 40px; } .pcm-of__head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; padding: 16px 20px; color: #fff; background: var(--navy); } .pcm-of__head b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; font: 700 13px var(--f-title); color: #fff; background: var(--blue); } .pcm-of__head span { font: 700 13px/1.3 var(--f-label); letter-spacing: 1.04px; } .pcm-of__item--g .pcm-of__head { background: #0b2c2c; } .pcm-of__item--g .pcm-of__head b { background: #0aa355; } @media (min-width: 1000px) { .pcm-of__item--g .pcm-of__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pcm-of__item--g .pcm-of__vis { order: 2; } } /* animações: as camadas descem e os itens entram quando cada bloco aparece */ .js-reveal .pcm-of__item.is-in .pcm-iso__lay { animation: pcm-drop 1s var(--ease-out-circ) calc(.15s + var(--i) * .22s) both, pcm-bob 6s ease-in-out calc(1.4s + var(--i) * .5s) infinite; } .js-reveal .pcm-of__item.is-in .pcm-iso__link { animation: pcm-fade .7s ease 1.1s both; } .js-reveal .pcm-of__item.is-in .pcm-tiles__i { animation: pcm-in .6s var(--ease-out-circ) both; } @media (max-width: 799px) { .pcm-lead { font-size: 24px; letter-spacing: -.4px; } } /* ================================================================= PCM — FORMAS DE ATUAÇÃO (2026-11-03): 01 e 02 um abaixo do outro, sem animação. Cada forma é um painel com a cor dela no topo (01 azul, 02 verde): título, texto e destaque à esquerda; entregas em 2 colunas à direita. ================================================================= */ .pcm-formas__head { margin-bottom: 40px; } .pcm-forma { display: grid; gap: 28px; padding: 28px 20px; background: var(--bg-light); box-shadow: inset 0 3px 0 var(--blue); } .pcm-forma + .pcm-forma { margin-top: 16px; } .pcm-forma__main { display: grid; gap: 20px; align-content: start; } .pcm-forma .pcm-of__head { margin: 0; } .pcm-forma .pcm-of__hl { background: #fff; } .pcm-forma--g { box-shadow: inset 0 3px 0 #0aa355; } .pcm-forma--g .pcm-of__head { background: #0b2c2c; } .pcm-forma--g .pcm-of__head b { background: #0aa355; } .pcm-forma--g .pcm-of__hl { box-shadow: inset 3px 0 0 #0aa355; } .pcm-forma--g .pcm-of__hlt { color: #0a7a41; } .pcm-forma--g .pcm-tiles__i svg { background: #0b7f3f; } /* frases curtas (chamada, destaques, entregas) à esquerda: justificadas abriam buracos; entregas sem esticar a altura */ main .pcm-formas .pcm-lead, main .pcm-formas .pcm-of__hlt, main .pcm-formas .pcm-tiles__i span { text-align: left; hyphens: manual; } .pcm-forma .pcm-tiles { align-content: start; } @media (min-width: 1000px) { .pcm-forma { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; padding: 48px; } } /* ================================================================= PCM — A PLANNING AO LADO DA SUA EQUIPE (2026-10-26): roda com o PCM no centro e as 6 frentes em volta (abas [data-auto], js/pcm.js bloco 1). Ao lado, o antes → com a Planning da frente escolhida. Abaixo de 700px a roda vira uma grade de 2 colunas. ================================================================= */ @property --hp { syntax: ''; inherits: false; initial-value: 0%; } .pcm-hub { display: grid; gap: 32px; } .pcm-hub svg { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pcm-hub__map { position: relative; container-type: inline-size; } .pcm-hub__core { display: grid; gap: 4px; padding: 18px 20px; color: #fff; background: radial-gradient(circle at 30% 20%, #1c4fa8 0%, #07142b 75%); } .pcm-hub__core small { font: 700 12px/1 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue-soft); } .pcm-hub__core b { font: 700 20px/1.15 var(--f-title); letter-spacing: -.3px; } .pcm-hub__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .pcm-hub__node { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--black); background: var(--bg-light); } .pcm-hub__ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 74, 173, .25), 0 8px 18px -10px rgba(7, 20, 43, .35); transition: background-color .35s var(--ease-io-quad), box-shadow .35s, transform .5s var(--ease-out-circ); } .pcm-hub__ico svg { width: 22px; height: 22px; stroke: var(--logo-blue); transition: stroke .35s; } .pcm-hub__ring { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--blue) var(--hp), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); } .pcm-hub__node.is-run .pcm-hub__ring { animation: pcm-hub-p var(--dur, 5.5s) linear forwards; } @keyframes pcm-hub-p { to { --hp: 100%; } } .pcm-hub__name { font: 600 14px/1.25 var(--f-title); color: rgba(0, 0, 0, .62); transition: color .3s; } .pcm-hub__name small { display: block; margin-bottom: 3px; font: 700 11px/1 var(--f-label); letter-spacing: 1px; color: var(--blue); } .pcm-hub__node:hover .pcm-hub__ico { box-shadow: inset 0 0 0 1.5px var(--blue), 0 10px 22px -10px rgba(7, 20, 43, .45); } .pcm-hub__node[aria-selected="true"] .pcm-hub__ico { background: var(--logo-blue); box-shadow: 0 0 0 6px rgba(14, 118, 255, .14), 0 12px 24px -10px rgba(0, 74, 173, .7); transform: scale(1.08); } .pcm-hub__node[aria-selected="true"] .pcm-hub__ico svg { stroke: #fff; } .pcm-hub__node[aria-selected="true"] .pcm-hub__name { color: var(--black); font-weight: 700; } .pcm-hub__node:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; } /* painel: antes → com a Planning */ .pcm-hub__panel { display: grid; } .pcm-hub__panel[hidden] { display: none; } .pcm-hub__count { margin-bottom: 14px; font: 600 13px/1 var(--f-label); letter-spacing: 1px; color: var(--muted); } .pcm-hub__count b { font: 800 30px/1 var(--f-title); letter-spacing: -.5px; color: var(--logo-blue); } .pcm-hub__antes { padding: 16px 20px; background: #fdf1ec; box-shadow: inset 3px 0 0 #d95926; } .pcm-hub__antes small { display: block; font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: #d95926; } .pcm-hub__antes s { position: relative; display: inline-block; margin-top: 4px; font: 600 20px/1.3 var(--f-title); letter-spacing: -.2px; color: rgba(0, 0, 0, .5); text-decoration: none; } .pcm-hub__antes s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: #d95926; transform-origin: left; animation: pcm-hub-strike .5s var(--ease-io-quad) .2s both; } .pcm-hub__arrow { position: relative; display: block; width: 2px; height: 34px; margin-left: 30px; background: repeating-linear-gradient(180deg, var(--blue) 0 4px, transparent 4px 8px); transform-origin: top; animation: pcm-hub-down .4s var(--ease-io-quad) .45s both; } .pcm-hub__arrow::after { content: ""; position: absolute; left: -5px; bottom: -6px; border: 6px solid transparent; border-top: 7px solid var(--blue); border-bottom: 0; } .pcm-hub__now { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 26px 24px 28px; overflow: hidden; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b3a8a 0%, #07142b 70%); animation: pcm-hub-up .6s var(--ease-out-circ) .55s both; } .pcm-hub__now::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 90% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 90% 0%, #000 20%, transparent 75%); } .pcm-hub__now > * { position: relative; } .pcm-hub__now small { grid-column: 1 / -1; margin-bottom: 16px; font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue-soft); } .pcm-hub__nowico { grid-row: span 2; } .pcm-hub__nowico svg { display: block; width: 52px; height: 52px; padding: 13px; background: var(--blue); stroke: #fff; } .pcm-hub__now h3 { font: 700 22px/1.2 var(--f-title); letter-spacing: -.3px; } main .pcm-hub__now p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: rgba(243, 243, 243, .78); text-align: left; } @keyframes pcm-hub-strike { from { transform: scaleX(0); } } @keyframes pcm-hub-down { from { transform: scaleY(0); } } @keyframes pcm-hub-up { from { opacity: 0; transform: translateY(14px); } } .pcm-hub ~ .pcm-ah__box { margin-top: 64px; } @media (min-width: 700px) { /* a roda: nós em volta do centro (cos/sin) e uma ligação de cada nó até o núcleo */ .pcm-hub__map { width: 100%; max-width: 600px; aspect-ratio: 1; margin-inline: auto; } .pcm-hub__map::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed rgba(0, 74, 173, .22); } .pcm-hub__map::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(14, 118, 255, .12), transparent 70%); pointer-events: none; } .pcm-hub__core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 34cqw; aspect-ratio: 1; padding: 0; place-content: center; justify-items: center; text-align: center; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(14, 118, 255, .08), 0 0 0 22px rgba(14, 118, 255, .04), 0 24px 50px -20px rgba(7, 20, 43, .6); } .pcm-hub__core b { max-width: 10ch; font-size: clamp(16px, 3.4cqw, 22px); } .pcm-hub__nodes { position: absolute; inset: 0; display: block; margin: 0; } .pcm-hub__node { position: absolute; z-index: 1; left: calc(50% + cos(var(--a)) * 38%); top: calc(50% + sin(var(--a)) * 38%); width: 150px; margin: -28px 0 0 -75px; grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 0; text-align: center; background: none; } .pcm-hub__node::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 28px; width: 21cqw; height: 2px; transform-origin: 0 50%; transform: rotate(calc(var(--a) + 180deg)); background: repeating-linear-gradient(90deg, rgba(0, 74, 173, .3) 0 4px, transparent 4px 8px); } .pcm-hub__node[aria-selected="true"]::before { background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px) 0 0 / 20px 2px; animation: pcm-hub-flow .8s linear infinite; } .pcm-hub__ico { width: 56px; height: 56px; } .pcm-hub__ico svg { width: 24px; height: 24px; } .pcm-hub__name { max-width: 15ch; } .js-reveal .pcm-hub__map .pcm-hub__node { opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease-io-quad), transform .7s var(--ease-out-circ); } .js-reveal .pcm-hub__map.is-in .pcm-hub__node { opacity: 1; transform: none; } .pcm-hub__node:nth-child(2) { transition-delay: .08s; } .pcm-hub__node:nth-child(3) { transition-delay: .16s; } .pcm-hub__node:nth-child(4) { transition-delay: .24s; } .pcm-hub__node:nth-child(5) { transition-delay: .32s; } .pcm-hub__node:nth-child(6) { transition-delay: .4s; } } @keyframes pcm-hub-flow { to { background-position: -20px 0; } } @media (min-width: 1000px) { .pcm-hub { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; } } @media (prefers-reduced-motion: reduce) { .pcm-hub__antes s::after, .pcm-hub__arrow, .pcm-hub__now, .pcm-hub__node::before { animation: none !important; } } /* ================================================================= PCM — DIAGNÓSTICO DE MANUTENÇÃO e AVALIAÇÃO DE PRODUTIVIDADE (2026-10-26): cabeçalho + painel com o número principal; trilha numerada do que entregamos; "Indicada para" e "O que muda" lado a lado. Mesmos textos. ================================================================= */ .pcm-sv { --sv-bg: #eceff4; } .pcm-sv.sec--white { --sv-bg: #fff; } .pcm-sv svg { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pcm-sv__top { display: grid; gap: 32px; } .pcm-sv__card { position: relative; padding: 30px 26px; overflow: hidden; color: #fff; background: linear-gradient(165deg, #0a1830 0%, #0f3270 100%); } .pcm-sv__card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse at 80% 10%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse at 80% 10%, #000 25%, transparent 80%); } .pcm-sv__card > * { position: relative; } .pcm-sv__big { display: flex; align-items: baseline; gap: 10px; } .pcm-sv__big b { font: 800 clamp(60px, 7vw, 92px)/.9 var(--f-title); letter-spacing: -2px; } .pcm-sv__big b i { margin: 0 .14em; font-style: normal; font-weight: 500; font-size: .32em; letter-spacing: 0; color: var(--blue-soft); vertical-align: .55em; } .pcm-sv__big b small { font-size: .55em; letter-spacing: -1px; color: var(--blue-soft); } .pcm-sv__big > span { font: 600 22px/1 var(--f-title); color: var(--blue-soft); } main .pcm-sv__cap { max-width: 34ch; margin-top: 12px; font-size: 16px; line-height: 1.45; color: rgba(243, 243, 243, .82); text-align: left; } .pcm-sv__lbl { margin-top: 24px; padding-top: 20px; font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue-soft); background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .2) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .pcm-sv__chips { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .pcm-sv__chips li { display: grid; gap: 10px; padding: 14px 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .pcm-sv__chips svg { width: 22px; height: 22px; stroke: var(--blue-soft); } .pcm-sv__chips span { font: 600 14px/1.2 var(--f-title); overflow-wrap: anywhere; } .js-reveal .pcm-sv__card .pcm-sv__chips li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-io-quad), transform .6s var(--ease-out-circ); transition-delay: calc(.3s + var(--c, 0) * .06s); } .js-reveal .pcm-sv__card.is-in .pcm-sv__chips li { opacity: 1; transform: none; } .pcm-sv__chips li:nth-child(2) { --c: 1; } .pcm-sv__chips li:nth-child(3) { --c: 2; } .pcm-sv__chips li:nth-child(4) { --c: 3; } .pcm-sv__chips li:nth-child(5) { --c: 4; } .pcm-sv__chips li:nth-child(6) { --c: 5; } /* trilha do que entregamos (celular: vertical; computador: horizontal) */ .pcm-sv__how { margin-top: 64px; } .pcm-sv__how > .tabs__label { margin-top: 0; } .pcm-sv__h { margin-top: 4px; font: 700 24px/1.2 var(--f-title); letter-spacing: -.3px; } .pcm-sv__steps { position: relative; list-style: none; display: grid; gap: 18px; margin-top: 28px; } .pcm-sv__steps::before, .pcm-sv__steps::after { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: repeating-linear-gradient(180deg, rgba(0, 74, 173, .25) 0 4px, transparent 4px 8px); } .pcm-sv__steps::after { background: var(--logo-blue); transform-origin: top; transition: transform 1.4s var(--ease-io-quad) .2s; } .pcm-sv__steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: center; } .pcm-sv__num { position: relative; z-index: 1; grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 700 16px/1 var(--f-title); color: #fff; background: var(--logo-blue); box-shadow: 0 0 0 6px var(--sv-bg); transition: background-color .4s, color .4s, box-shadow .4s; transition-delay: calc(.25s + var(--i) * .22s); } .pcm-sv__sico svg { display: block; width: 26px; height: 26px; stroke: var(--logo-blue); } .pcm-sv__st { font: 600 17px/1.35 var(--f-title); letter-spacing: -.1px; } .js-reveal .pcm-sv__steps:not(.is-in)::after { transform: scaleY(0); } .js-reveal .pcm-sv__steps:not(.is-in) .pcm-sv__num { color: var(--logo-blue); background: var(--sv-bg); box-shadow: 0 0 0 6px var(--sv-bg), inset 0 0 0 2px rgba(0, 74, 173, .35); } /* indicada para x o que muda */ .pcm-sv__duo { display: grid; gap: 16px; margin-top: 56px; } .pcm-sv__fit, .pcm-sv__gain { padding: 28px 26px; } .pcm-sv__fit { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); } .sec--white .pcm-sv__fit { background: var(--bg-light); box-shadow: none; } .pcm-sv__fit .tabs__label, .pcm-sv__gain .tabs__label { margin: 0 0 8px; } .pcm-sv__fit ul, .pcm-sv__gain ul { list-style: none; } .pcm-sv__fit li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; background: var(--h-dash) left bottom / 100% 1px no-repeat; } .pcm-sv__fit li:last-child { background: none; } .pcm-sv__fit svg { display: block; width: 44px; height: 44px; padding: 11px; background: rgba(0, 74, 173, .09); stroke: var(--logo-blue); } .pcm-sv__fit span { font: 500 16px/1.4 var(--f-title); } .pcm-sv__gain { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b3a8a 0%, #07142b 70%); } .pcm-sv__gain h3 { font: 700 24px/1.2 var(--f-title); letter-spacing: -.3px; } .pcm-sv__gain ul { margin-top: 10px; } .pcm-sv__gain li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .18) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .pcm-sv__gain li:last-child { background: none; } .pcm-sv__gain li::before { content: "✓"; display: grid; place-items: center; width: 30px; height: 30px; font: 700 14px/1 var(--f-title); color: #fff; background: var(--blue); } .pcm-sv__gain span { font: 600 17px/1.35 var(--f-title); } .pcm-sv .sol__faq { margin-top: 16px; } @media (min-width: 900px) { .pcm-sv__steps { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; } .pcm-sv__steps::before, .pcm-sv__steps::after { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px; } .pcm-sv__steps::before { background: repeating-linear-gradient(90deg, rgba(0, 74, 173, .25) 0 4px, transparent 4px 8px); } .pcm-sv__steps::after { transform-origin: left; } .js-reveal .pcm-sv__steps:not(.is-in)::after { transform: scaleX(0); } .pcm-sv__steps li { grid-template-columns: 1fr; row-gap: 14px; align-content: start; align-items: start; } .pcm-sv__num { grid-row: auto; } .pcm-sv__sico { margin-top: 4px; } .pcm-sv__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pcm-sv__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } .pcm-sv__card { padding: 36px 32px; } } @media (max-width: 479px) { .pcm-sv__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* a ligação passa por trás do nome (no nó de cima ela cruzava o texto) */ @media (min-width: 700px) { .pcm-hub__name { position: relative; padding: 2px 6px; background: #fff; } } /* trilha: a linha termina no centro do último número */ @media (min-width: 900px) { .pcm-sv__steps::before, .pcm-sv__steps::after { right: calc((100% - (var(--n) - 1) * 20px) / var(--n) - 28px); } } /* "Não é trocar a equipe" (2026-10-26): no computador a foto ocupa a faixa toda e o texto fica sobre um degradê escuro à esquerda (antes: metade vazia e título pequeno) */ @media (min-width: 1000px) { .pcm-ah__box { position: relative; display: block; min-height: 480px; background: #07142b; } .pcm-ah__pic { position: absolute; inset: 0 0 0 30%; min-height: 0; } .pcm-ah__pic img { object-position: center 47%; } .pcm-ah__pic::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #07142b 0%, rgba(7, 20, 43, .85) 22%, rgba(7, 20, 43, .35) 50%, rgba(7, 20, 43, 0) 75%); } .pcm-ah__boxtext { position: relative; z-index: 2; display: grid; align-content: center; min-height: 480px; max-width: 620px; padding: 64px 56px; } .pcm-ah__boxtext h3 { max-width: 16ch; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.8px; } main .pcm-ah__boxtext p { max-width: 44ch; margin-top: 20px; font-size: 17px; line-height: 1.55; color: rgba(243, 243, 243, .82); text-align: left; } } /* ================================================================= PCM — MÉTODO PLANNING (2026-10-26, 2ª versão): as 4 fases à vista, lado a lado. Cada coluna usa as mesmas linhas (subgrid): meses, nome, título, frase, o que fazemos e o que você recebe ficam alinhados entre as fases, para ler em linha (comparar) ou em coluna (uma fase). Cor do número escurece fase a fase. "A regra" em quatro blocos. ================================================================= */ .pcm-road { list-style: none; display: grid; gap: 16px; } .pcm-road__ph { --c: #7fb2ff; position: relative; display: grid; align-content: start; padding: 22px 22px 24px; background: var(--bg-light); box-shadow: inset 0 4px 0 var(--c); } .pcm-road__ph:nth-child(2) { --c: #3d8bff; } .pcm-road__ph:nth-child(3) { --c: #0e5fd8; } .pcm-road__ph:nth-child(4) { --c: #07142b; } .pcm-road__head { display: flex; align-items: center; gap: 12px; } .pcm-road__num { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font: 800 18px/1 var(--f-title); color: #fff; background: var(--c); } .pcm-road__when { font: 700 11px/1.3 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(7, 20, 43, .55); } .pcm-road__name { margin-top: 18px; font: 800 22px/1.1 var(--f-title); letter-spacing: .02em; color: var(--black); } .pcm-road__name small { display: block; margin-bottom: 4px; font: 700 11px/1 var(--f-label); letter-spacing: 1.4px; color: var(--blue); } .pcm-road__do { margin-top: 18px; padding-top: 16px; background: var(--h-dash) left top / 100% 1px no-repeat; } .pcm-road__do ul { list-style: none; display: grid; margin-top: 4px; } .pcm-road__do li { position: relative; padding: 7px 0 7px 16px; font-size: 14.5px; line-height: 1.4; } .pcm-road__do li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: var(--c); } .pcm-road__get { align-self: end; margin-top: 18px; padding: 16px 16px 6px; background: #e7f5ed; } .pcm-road__get .pcm-h4 { color: #0a7a41; } .pcm-road__get .pcm-get { margin-top: 2px; } .pcm-road__get .pcm-get li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 8px 0 10px; color: var(--black); font: 600 15px/1.35 var(--f-title); background: none; } .pcm-road__get .pcm-get li + li { background: repeating-linear-gradient(90deg, rgba(10, 122, 65, .25) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .pcm-road__get .pcm-get svg { width: 24px; height: 24px; padding: 5px; stroke-width: 2.8; } @media (min-width: 700px) { .pcm-road { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcm-road__ph { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } } @media (min-width: 1100px) { .pcm-road { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* seta de uma fase para a próxima: círculo no vão entre os cartões, na altura dos números */ .pcm-road__ph:not(:last-child)::after { content: "\2192"; position: absolute; z-index: 2; top: 31px; right: -20px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 13px/1 var(--f-title); color: var(--logo-blue); background: #fff; box-shadow: 0 0 0 1px rgba(0, 74, 173, .2), 0 4px 10px -4px rgba(7, 20, 43, .3); } } /* ================================================================= CONTROLE INICIAL DE EQUIPAMENTOS (2026-10-26): página feita do HTML-modelo do cliente (textos e imagem dele), no visual do site. js/ci.js. Implantação em azul e revisão em verde, como as formas 01/02 do PCM. ================================================================= */ .ci-hero .page-hero__media img { object-position: center 55%; } .ci-hero .pcm-selos { margin-top: 32px; } /* ---------- Entregas ---------- */ .ci-modes { display: grid; gap: 12px; } .ci-mode { position: relative; overflow: hidden; padding: 28px 26px 26px; color: #fff; background: linear-gradient(165deg, #0a1830 0%, #0f3270 100%); } .ci-mode--g { background: linear-gradient(165deg, #0c1f33 0%, #0e5a47 100%); } .ci-mode::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse at 90% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 90% 0%, #000 20%, transparent 75%); } .ci-mode > * { position: relative; } .ci-mode__tag { display: inline-block; padding: 6px 10px; font: 700 12px/1 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; background: var(--blue); } .ci-mode--g .ci-mode__tag { background: #0aa355; } .ci-mode__title { margin-top: 18px; font: 700 26px/1.15 var(--f-title); letter-spacing: -.4px; } main .ci-mode__text { max-width: 46ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: rgba(243, 243, 243, .8); text-align: left; } .ci-mode__list { list-style: none; margin-top: 18px; } .ci-mode__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; font: 500 16px/1.4 var(--f-title); background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .18) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .ci-mode__list li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; font: 700 12px/1 var(--f-title); color: #fff; background: var(--blue); } .ci-mode--g .ci-mode__list li::before { background: #0aa355; } .ci-ents { list-style: none; display: grid; gap: 4px; margin-top: 12px; } .ci-ent { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px; background: var(--bg-light); } .ci-ent__ico { grid-row: span 2; } .ci-ent__ico svg { display: block; width: 48px; height: 48px; padding: 12px; background: var(--logo-blue); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ci-ent h3 { font: 700 17px/1.25 var(--f-title); letter-spacing: -.2px; } main .ci-ent p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-align: left; } @media (min-width: 700px) { .ci-ents { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .ci-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ci-mode { padding: 36px 34px 32px; } } @media (min-width: 1100px) { .ci-ents { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ci-ent { grid-template-columns: 1fr; align-content: start; padding: 26px 24px 28px; } .ci-ent h3 { margin-top: 20px; } .ci-ent__ico { grid-row: auto; } } /* ---------- Fases: linha que se preenche de azul a verde ---------- */ .ci-phases { position: relative; list-style: none; display: grid; gap: 18px; } .ci-phases::before, .ci-phases::after { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 3px; } .ci-phases::before { background: repeating-linear-gradient(180deg, rgba(243, 243, 243, .2) 0 5px, transparent 5px 10px); } .ci-phases::after { background: linear-gradient(180deg, #3D8BFF, #1BA2D6 50%, #00BF63); transform-origin: top; transition: transform 1.6s var(--ease-io-quad) .2s; } .js-reveal .ci-phases:not(.is-in)::after { transform: scaleY(0); } .ci-ph { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; } .ci-ph__node { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 8px; } .ci-ph__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 0 0 6px #04101f, 0 0 0 7px color-mix(in srgb, var(--c) 55%, transparent), 0 14px 30px color-mix(in srgb, var(--c) 40%, transparent); transition: transform .6s var(--ease-out-circ), opacity .5s; transition-delay: calc(.25s + var(--i) * .25s); } .js-reveal .ci-phases:not(.is-in) .ci-ph__ico { opacity: 0; transform: scale(.5); } .ci-ph__ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ci-ph__tag { font: 700 11px/1.2 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--c); text-align: center; } .ci-ph__card { position: relative; padding: 20px 20px 16px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1), inset 0 3px 0 var(--c); transition: opacity .6s var(--ease-io-quad), transform .7s var(--ease-out-circ); transition-delay: calc(.35s + var(--i) * .25s); } .js-reveal .ci-phases:not(.is-in) .ci-ph__card { opacity: 0; transform: translateY(14px); } .ci-ph__card h3 { font: 700 17px/1.3 var(--f-title); letter-spacing: -.2px; color: #fff; } .ci-ph__card ul { list-style: none; margin-top: 10px; padding-top: 8px; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .16) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .ci-ph__card li { position: relative; padding: 5px 0 5px 18px; font-size: 14px; line-height: 1.45; color: rgba(243, 243, 243, .78); } .ci-ph__card li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--c); } @media (min-width: 1100px) { .ci-phases { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .ci-phases::before, .ci-phases::after { left: 10%; right: 10%; top: 31px; bottom: auto; width: auto; height: 3px; } .ci-phases::before { background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .2) 0 5px, transparent 5px 10px); } .ci-phases::after { background: linear-gradient(90deg, #3D8BFF, #1BA2D6 50%, #00BF63); transform-origin: left; } .js-reveal .ci-phases:not(.is-in)::after { transform: scaleX(0); } .ci-ph { grid-template-columns: 1fr; grid-template-rows: auto 1fr; row-gap: 18px; } .ci-ph__node { justify-self: center; } .ci-ph__ico { width: 70px; height: 70px; } .ci-ph__card { height: 100%; } } .ci-met { list-style: none; display: grid; margin-top: 40px; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .2) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .ci-met li { padding: 22px 0; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .2) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .ci-met b { display: block; font: 700 18px/1.25 var(--f-title); color: #fff; } .ci-met b::before { content: ""; display: block; width: 24px; height: 3px; margin-bottom: 12px; background: var(--blue-soft); } main .ci-met p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(243, 243, 243, .72); text-align: left; } @media (min-width: 700px) { .ci-met { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } } @media (min-width: 1100px) { .ci-met { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; } .ci-met li { padding: 26px 24px; background: repeating-linear-gradient(180deg, rgba(243, 243, 243, .2) 0 4px, transparent 4px 8px) left top / 1px 100% no-repeat; } .ci-met li:first-child { padding-left: 0; background: none; } } /* ---------- Ganhos ---------- */ .ci-stats { list-style: none; display: grid; gap: 4px; } .ci-stat { position: relative; overflow: hidden; padding: 26px 24px 24px; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b3a8a 0%, #07142b 70%); } .ci-stat__n { display: block; font: 800 clamp(34px, 3.2vw, 44px)/1 var(--f-title); letter-spacing: -1px; color: var(--blue-soft); } .ci-stat--g .ci-stat__n { color: #4FE39A; } .ci-stat__n small { font-size: .5em; letter-spacing: -.2px; } .ci-stat__t { display: block; margin-top: 14px; font: 700 17px/1.3 var(--f-title); } main .ci-stat p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: rgba(243, 243, 243, .72); text-align: left; } @media (min-width: 700px) { .ci-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ci-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ci-vs { display: grid; gap: 12px; margin-top: 16px; } .ci-vs__col { padding: 26px 24px 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .ci-vs__col--sem { box-shadow: inset 3px 0 0 #d95926; background: #fdf1ec; } .ci-vs__col--com { box-shadow: inset 3px 0 0 #0aa355; background: #fff; } .ci-vs__col h3 { font: 700 19px/1.25 var(--f-title); letter-spacing: -.2px; } .ci-vs__col--sem h3 { color: #b2441b; } .ci-vs__col--com h3 { color: #0a7a41; } .ci-vs__col ul { list-style: none; margin-top: 10px; } .ci-vs__col li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 11px 0; font-size: 15.5px; line-height: 1.45; color: rgba(0, 0, 0, .75); background: var(--h-dash) left top / 100% 1px no-repeat; } .ci-vs__col li:first-child { background: none; } .ci-vs__col li::before { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; font: 700 12px/1 var(--f-title); color: #fff; } .ci-vs__col--sem li::before { content: "✕"; background: #d95926; } .ci-vs__col--com li::before { content: "✓"; background: #0aa355; } .ci-vs__arrow { display: grid; place-items: center; justify-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); transform: rotate(90deg); } .ci-vs__arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (min-width: 900px) { .ci-vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; } .ci-vs__arrow { align-self: center; transform: none; } .ci-vs__col { padding: 32px 30px 22px; } } /* ---------- Exemplos ---------- */ .ci-ex__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .ci-ex__tabs button { display: grid; gap: 4px; padding: 14px 16px 16px; border: 0; cursor: pointer; text-align: left; font: 700 14.5px/1.25 var(--f-title); color: rgba(7, 20, 43, .6); background: var(--bg-light); transition: background-color .3s var(--ease-io-quad), color .3s; } .ci-ex__tabs small { font: 700 11px/1 var(--f-label); letter-spacing: 1px; color: var(--blue); } .ci-ex__tabs button:hover { color: var(--black); background: #e9eef6; } .ci-ex__tabs button[aria-selected="true"] { color: #fff; background: var(--navy); } .ci-ex__tabs button[aria-selected="true"] small { color: var(--blue-soft); } .ci-ex__tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (min-width: 700px) { .ci-ex__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ci-ex__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .ci-ex__panel { display: grid; margin-top: 4px; background: var(--bg-light); animation: pcm-in .5s var(--ease-out-circ) both; } .ci-ex__panel[hidden] { display: none; } .ci-ex__fig { position: relative; display: grid; align-content: center; gap: 16px; min-width: 0; margin: 0; padding: 46px 18px 22px; overflow: hidden; color: #fff; background: linear-gradient(165deg, #0a1830 0%, #0f3270 100%); } .ci-ex__fig::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 80%); } .ci-ex__fig > * { position: relative; min-width: 0; } .ci-ex__fig--center { justify-items: center; padding-top: 32px; } .ci-ex__fig figcaption { font-size: 12.5px; color: rgba(243, 243, 243, .6); } .ci-ex__tag { position: absolute !important; top: 14px; right: 16px; padding: 4px 9px; font: 700 10.5px/1 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(243, 243, 243, .6); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .2); } .ci-ex__tx { padding: 28px 22px 30px; } .ci-ex__tx h3 { margin-top: 10px; font: 700 clamp(22px, 2vw, 27px)/1.2 var(--f-title); letter-spacing: -.4px; text-wrap: balance; } .ci-ex__list { list-style: none; counter-reset: ci; margin-top: 20px; } .ci-ex__list li { counter-increment: ci; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; background: var(--h-dash) left top / 100% 1px no-repeat; } .ci-ex__list li:first-child { background: none; } .ci-ex__list li::before { content: counter(ci, decimal-leading-zero); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; font: 700 12px/1 var(--f-title); color: var(--logo-blue); background: rgba(14, 118, 255, .1); } .ci-ex__list b { font: 700 16px/1.3 var(--f-title); } .ci-ex__list span { margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--muted); } @media (min-width: 1000px) { .ci-ex__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 460px; } .ci-ex__fig { padding: 52px 30px 30px; } .ci-ex__tx { align-self: center; padding: 40px 40px; } } /* taxonomia */ .ci-tax { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; } .ci-tax__sep { font: 600 22px/40px var(--f-title); color: rgba(153, 197, 255, .5); } .ci-tax__c { display: grid; justify-items: center; gap: 6px; cursor: pointer; transition: opacity .2s, transform .2s; } .ci-tax__c b { padding: 8px 10px; font: 700 18px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; color: #fff; background: hsl(calc(215 - var(--i) * 22) 80% 52%); transition: box-shadow .2s; } .ci-tax__c small { max-width: 86px; font-size: 11.5px; line-height: 1.25; text-align: center; color: rgba(243, 243, 243, .7); } .ci-tax.is-hl .ci-tax__c { opacity: .45; } .ci-tax.is-hl .ci-tax__c.is-on { opacity: 1; transform: translateY(-2px); } .ci-tax.is-hl .ci-tax__c.is-on b { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); } .ci-tree { list-style: none; padding: 10px 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .ci-tree li { display: flex; align-items: center; gap: 12px; padding: 5px 6px 5px calc(6px + var(--l) * 16px); font-size: 13.5px; transition: background-color .2s, opacity .2s; } .ci-tree li::before { content: ""; flex: none; width: 8px; height: 8px; background: hsl(calc(215 - var(--l) * 22) 80% 58%); } .ci-tree code { font: 600 12.5px/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--blue-soft); } .ci-tree span { color: rgba(243, 243, 243, .88); } .ci-tree.is-hl li { opacity: .4; } .ci-tree.is-hl li.is-on { opacity: 1; background: rgba(255, 255, 255, .08); } /* tabelas dos exemplos */ .ci-tw { overflow-x: auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .ci-tb { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; } .ci-tb th { padding: 10px; text-align: left; vertical-align: bottom; font: 700 11px/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: rgba(243, 243, 243, .65); background: rgba(255, 255, 255, .07); } .ci-tb td { padding: 10px; vertical-align: middle; color: rgba(243, 243, 243, .9); border-top: 1px solid rgba(255, 255, 255, .07); } .ci-tb td:first-child { font-weight: 700; } .ci-tb--plain td:first-child { font-weight: 400; color: rgba(243, 243, 243, .55); } .ci-lv { display: inline-grid; place-items: center; width: 24px; height: 24px; font: 800 12px/1 var(--f-title); font-style: normal; } .ci-lv--1 { color: #4FE39A; background: rgba(0, 191, 99, .2); } .ci-lv--2 { color: #FFC864; background: rgba(245, 165, 36, .2); } .ci-lv--3 { color: #FF8A8D; background: rgba(229, 72, 77, .22); } .ci-abc { display: inline-grid; place-items: center; width: 28px; height: 28px; font: 700 14px/1 var(--f-title); color: #fff; } .ci-abc--a { background: #E5484D; } .ci-abc--b { background: #F5A524; } .ci-abc--c { background: #0EB3A0; } .ci-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 13px; color: rgba(243, 243, 243, .88); } .ci-leg span { display: inline-flex; align-items: center; gap: 8px; } .ci-leg em { font-style: normal; font-size: 12px; color: rgba(243, 243, 243, .55); } .ci-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .ci-doc b { font: 700 15px/1.3 var(--f-title); } .ci-doc span { padding: 4px 10px; font: 700 11px/1.2 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: #FF8A8D; background: rgba(229, 72, 77, .16); } .ci-nt { padding: 3px 8px; font: 700 11.5px/1.2 var(--f-label); font-style: normal; white-space: nowrap; } .ci-nt--mec { color: #9CC4FF; background: rgba(61, 139, 255, .18); } .ci-nt--pre { color: #C4B0FF; background: rgba(139, 92, 246, .2); } .ci-nt--lub { color: #FFC864; background: rgba(245, 165, 36, .2); } .ci-nt--ele { color: #4FE39A; background: rgba(0, 191, 99, .18); } /* mapa de 52 semanas (as células são geradas no js/ci.js) */ .ci-m52 { display: grid; gap: 10px; } .ci-m52__row, .ci-m52__axis { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; } .ci-m52__row > span b { display: block; font: 700 13px/1.25 var(--f-title); } .ci-m52__row > span small { display: block; font-size: 11.5px; color: rgba(243, 243, 243, .6); } .ci-m52__wk { display: grid; grid-template-columns: repeat(52, minmax(0, 1fr)); gap: 2px; } .ci-m52__wk i { height: 20px; background: rgba(255, 255, 255, .07); } .ci-m52__wk i.is-on { background: var(--c); animation: ci-pop .35s var(--ease-out-circ) both; animation-delay: calc(var(--w) * 12ms); } .ci-m52__axis > div { position: relative; height: 14px; } .ci-m52__axis > div span { position: absolute; font: 700 11px/1 var(--f-label); color: rgba(243, 243, 243, .55); } .ci-m52__axis > div span:last-child { transform: translateX(-100%); } @keyframes ci-pop { from { opacity: 0; transform: scaleY(.2); } } /* ficha do ativo */ .ci-card { width: 100%; max-width: 400px; padding: 22px 22px 20px; color: #fff; background: linear-gradient(160deg, #13233D, #0A1830); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 50px rgba(0, 0, 0, .35); } .ci-card__h { display: flex; align-items: center; justify-content: space-between; } .ci-card__h span { font: 700 10.5px/1 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(243, 243, 243, .6); } .ci-card code { display: block; margin-top: 14px; font: 600 13px/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--blue-soft); } .ci-card h4 { margin-top: 4px; font: 700 22px/1.2 var(--f-title); } .ci-card ul { list-style: none; margin-top: 14px; background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) left top / 100% 1px no-repeat; } .ci-card li { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); } .ci-card li i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #0aa355; } .ci-card li i::after { content: ""; position: absolute; left: 5px; top: 4px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .ci-card li span { flex: 1; color: rgba(243, 243, 243, .88); } .ci-card li em { font-style: normal; font: 700 12.5px/1 var(--f-title); color: rgba(243, 243, 243, .6); } .ci-card__f { margin-top: 14px; } .ci-card__f span { font: 700 12.5px/1 var(--f-title); color: #4FE39A; } .ci-card__bar { height: 6px; margin-top: 8px; overflow: hidden; background: rgba(255, 255, 255, .08); } .ci-card__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #0aa355); } .ci-ex__panel:not([hidden]) .ci-card li { animation: ci-li .45s var(--ease-out-circ) both; animation-delay: calc(.25s + var(--d) * .22s); } .ci-ex__panel:not([hidden]) .ci-card__bar i { animation: ci-bar 1.3s var(--ease-io-quad) both .4s; } @keyframes ci-li { from { opacity: 0; transform: translateX(10px); } } @keyframes ci-bar { from { width: 0; } } @media (max-width: 599px) { .ci-tax__c b { padding: 6px 7px; font-size: 14px; } .ci-tax__sep { font-size: 17px; line-height: 32px; } .ci-m52__row, .ci-m52__axis { grid-template-columns: 1fr; gap: 4px; } .ci-m52__axis > span { display: none; } .ci-m52__wk i { height: 14px; } } /* ---------- Gestão do projeto ---------- */ .ci-gp { display: grid; gap: 12px; } .ci-gp__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .ci-gp__h b { font: 700 16px/1.3 var(--f-title); } .ci-gp__h span { padding: 4px 9px; font: 700 10.5px/1 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(7, 20, 43, .5); box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .2); } .ci-gantt, .ci-dash { min-width: 0; margin: 0; padding: 22px 20px 20px; } .ci-gantt { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .ci-gantt__scroll { overflow-x: auto; } .ci-gantt__in { min-width: 560px; } .ci-gantt__r { display: grid; grid-template-columns: 18px minmax(130px, 1.15fr) 40px 92px 2fr; gap: 8px; align-items: center; padding: 7px 0; font-size: 13px; background: var(--h-dash) left top / 100% 1px no-repeat; } .ci-gantt__hd { padding-top: 14px; font: 700 11px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: rgba(7, 20, 43, .5); background: none; } .ci-gantt__r > span:first-child { color: rgba(7, 20, 43, .45); } .ci-gantt__t { font-weight: 700; color: var(--navy); } .ci-gantt__p { text-align: right; font-weight: 700; } .ci-st { justify-self: start; padding: 3px 8px; font: 700 11px/1.2 var(--f-label); white-space: nowrap; } .ci-st--ok { color: #0a7a41; background: #e3f6ec; } .ci-st--go { color: var(--logo-blue); background: #e4eeff; } .ci-st--nx { color: #6b7a90; background: #f0f2f6; } .ci-gantt__wk { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 10px; } .ci-gantt__wk span { text-align: center; } .ci-gantt__today { position: absolute; top: -20px; transform: translateX(-50%); padding: 2px 6px; font: 700 10px/1 var(--f-label); letter-spacing: 0; text-transform: none; color: #fff; background: #E5484D; } .ci-gantt__b { position: relative; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), #eef1f6 calc(100% / 12 - 1px) calc(100% / 12)); } .ci-gantt__b i { position: absolute; top: 2px; bottom: 2px; overflow: hidden; background: #c9d6ea; transform-origin: left; transition: transform .8s var(--ease-out-circ); transition-delay: calc(.2s + var(--d) * .1s); } .ci-gantt__b em { display: block; height: 100%; background: linear-gradient(90deg, var(--logo-blue), var(--blue)); } .js-reveal .ci-gantt:not(.is-in) .ci-gantt__b i { transform: scaleX(0); } .ci-gantt__line { position: absolute; top: -8px; bottom: -8px; z-index: 1; width: 0; border-left: 2px dashed #E5484D; } .ci-dash { display: grid; gap: 12px; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #0b3a8a 0%, #07142b 70%); } .ci-dash .ci-gp__h { margin-bottom: 0; } .ci-dash .ci-gp__h span { color: rgba(243, 243, 243, .55); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .2); } .ci-dash__top { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: center; } .ci-gauge { text-align: center; } .ci-gauge svg { display: block; width: 120px; height: 66px; margin: 0 auto; overflow: visible; } .ci-gauge path { fill: none; stroke-width: 12; stroke-linecap: round; } .ci-gauge__bg { stroke: rgba(255, 255, 255, .08); } .ci-gauge__v { stroke: var(--blue); stroke-dasharray: 60 100; transition: stroke-dasharray 1.2s var(--ease-io-quad) .3s; } .js-reveal .ci-dash:not(.is-in) .ci-gauge__v { stroke-dasharray: 0 100; } .ci-gauge b { display: block; margin-top: -28px; font: 800 24px/1 var(--f-title); } .ci-gauge small { display: block; margin-top: 4px; font-size: 11px; color: rgba(243, 243, 243, .6); } .ci-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .ci-kpi dt { font: 700 10.5px/1.2 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: rgba(243, 243, 243, .6); } .ci-kpi dd { margin: 2px 0 0; font: 700 20px/1.2 var(--f-title); } .ci-kpi dd.is-blue { color: #4F9BFF; } .ci-kpi dd.is-green { color: #4FE39A; } .ci-kpi dd.is-sm { font-size: 15px; } .ci-kpi dd em { font-style: normal; font-weight: 400; font-size: 11.5px; color: rgba(243, 243, 243, .6); } .ci-dash__ok { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font: 700 13px/1.3 var(--f-title); color: #4FE39A; background: rgba(0, 191, 99, .12); box-shadow: inset 0 0 0 1px rgba(0, 191, 99, .3); } .ci-dash__ok i { width: 8px; height: 8px; border-radius: 50%; background: #4FE39A; box-shadow: 0 0 0 4px rgba(79, 227, 154, .2); } .ci-dash__sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; font: 700 11px/1.2 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: rgba(243, 243, 243, .7); background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .18) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .ci-dash__leg { display: flex; align-items: center; gap: 6px; letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 11.5px; } .ci-dash__leg i { display: inline-block; width: 10px; height: 10px; } .ci-dash__leg i.is-rl { margin-left: 8px; } .ci-dash .is-pv { background: rgba(143, 192, 255, .35); } .ci-dash .is-rl { background: #2E8BFF; } .ci-dash__rows { display: grid; gap: 7px; } .ci-dash__r { display: grid; grid-template-columns: 118px minmax(0, 1fr) 38px; gap: 10px; align-items: center; font-size: 12.5px; color: rgba(243, 243, 243, .88); } .ci-dash__r b { text-align: right; } .ci-dash__r > div { display: grid; gap: 3px; } .ci-dash__r > div i { display: block; height: 6px; min-width: 2px; width: var(--v); transform-origin: left; transition: transform .9s var(--ease-out-circ) .3s; } .js-reveal .ci-dash:not(.is-in) .ci-dash__r > div i { transform: scaleX(0); } .ci-scurve { display: block; width: 100%; height: 90px; } .ci-scurve__pv { fill: none; stroke: rgba(243, 243, 243, .45); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; } .ci-scurve__rl { fill: none; stroke: #2E8BFF; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-io-quad) .5s; } .js-reveal .ci-dash:not(.is-in) .ci-scurve__rl { stroke-dashoffset: 100; } .ci-scurve__today { stroke: rgba(255, 255, 255, .35); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .ci-gp__notes { list-style: none; display: grid; gap: 4px; margin-top: 12px; } .ci-gp__notes li { padding: 20px 22px; background: #fff; box-shadow: inset 3px 0 0 var(--blue); } .ci-gp__notes b { display: block; font: 700 16px/1.3 var(--f-title); } .ci-gp__notes span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--muted); } @media (min-width: 900px) { .ci-gp__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ci-gp { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .ci-gantt, .ci-dash { padding: 26px 26px 22px; } .ci-gantt__in { min-width: 0; } } @media (max-width: 559px) { .ci-dash__top { grid-template-columns: 1fr; } .ci-dash__r { grid-template-columns: 96px minmax(0, 1fr) 34px; } } @media (prefers-reduced-motion: reduce) { .ci-ex__panel, .ci-m52__wk i.is-on, .ci-ex__panel:not([hidden]) .ci-card li, .ci-ex__panel:not([hidden]) .ci-card__bar i { animation: none !important; } } /* ================================================================= GESTÃO DE GRANDES PARADAS (2026-10-26): página feita do HTML-modelo do cliente (textos, imagem e simulador dele), no visual do site. js/paradas.js. Reaproveita .ci-st, .ci-stat, .ci-gp__notes e .ci-ex__list. ================================================================= */ .gpr-hero .page-hero__media img { object-position: right center; } .gpr-hero .gp-selos { margin-top: 32px; } .gpr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .gpr-h b { font: 700 16px/1.3 var(--f-title); } .gpr-h__tag { padding: 4px 9px; font: 700 10.5px/1 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(7, 20, 43, .5); box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .2); white-space: nowrap; } [data-theme="dark"] .gpr-h__tag { color: rgba(243, 243, 243, .6); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .2); } .gpr-h__tag--g, [data-theme="dark"] .gpr-h__tag--g { color: #4FE39A; background: rgba(0, 191, 99, .14); box-shadow: none; } /* lista com ✓ (premissas, controle, governança) */ .gpr-ck { list-style: none; } .gpr-ck li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 11px 0; font-size: 15px; line-height: 1.45; background: var(--h-dash) left top / 100% 1px no-repeat; } .gpr-ck li:first-child { background: none; } .gpr-ck li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; font: 700 12px/1 var(--f-title); color: #fff; background: #0aa355; } .gpr-ck b { display: block; font: 700 15.5px/1.3 var(--f-title); } .gpr-ck span { display: block; } .gpr-ck b + span { margin-top: 2px; font-size: 14px; color: var(--muted); } .gpr-ck--dark li { color: rgba(243, 243, 243, .88); background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .16) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .gpr-ck--dark b { color: #fff; } /* ---------- PGGR: linha do tempo ---------- */ .gpr-tl { margin: 0; padding: 24px 20px 22px; color: #fff; background: radial-gradient(120% 140% at 90% -10%, #0b3a8a 0%, #07142b 65%); } .gpr-tl__g { position: relative; display: grid; gap: 8px; } .gpr-tl__r { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; } .gpr-tl__n b { display: block; font: 700 13.5px/1.25 var(--f-title); } .gpr-tl__n small { display: block; font-size: 11.5px; color: rgba(243, 243, 243, .55); } .gpr-tl__axw { position: relative; height: 16px; } .gpr-tl__axw span { position: absolute; transform: translateX(-50%); font: 700 11px/1 var(--f-label); color: rgba(243, 243, 243, .55); } .gpr-tl__axw span:last-child { transform: translateX(-100%); } .gpr-tl__bars { position: relative; display: grid; gap: 8px; } .gpr-tl__bars::after { content: ""; position: absolute; top: -26px; bottom: -6px; left: calc(204px + (100% - 204px) * .875); border-left: 2px dashed rgba(229, 72, 77, .8); } .gpr-tl__t { position: relative; height: 22px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 calc(12.5% - 1px), rgba(255, 255, 255, .09) calc(12.5% - 1px) 12.5%); } .gpr-tl__t i { position: absolute; top: 3px; bottom: 3px; background: var(--c); transform-origin: left; transition: transform 1s var(--ease-out-circ); transition-delay: calc(.2s + var(--d) * .15s); } .js-reveal .gpr-tl:not(.is-in) .gpr-tl__t i { transform: scaleX(0); } .gpr-tl__mr { align-items: start; margin-top: 4px; padding-top: 10px; background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) left top / 100% 1px no-repeat; } .gpr-tl__m { position: relative; height: 150px; } .gpr-mk { position: absolute; top: 0; width: 0; transition: opacity .5s; transition-delay: calc(.9s + var(--d) * .15s); } .js-reveal .gpr-tl:not(.is-in) .gpr-mk { opacity: 0; } .gpr-mk > i { position: absolute; z-index: 2; left: -8px; top: -8px; width: 16px; height: 16px; background: #F5A524; transform: rotate(45deg); box-shadow: 0 0 0 4px #081733; } .gpr-mk::before { content: ""; position: absolute; left: -1px; top: 8px; width: 2px; background: rgba(245, 165, 36, .45); } .gpr-mk--r1::before { height: 14px; } .gpr-mk--r2::before { height: 58px; } .gpr-mk--r3::before { height: 102px; } .gpr-mk > span { position: absolute; z-index: 3; white-space: nowrap; transform: translateX(-50%); padding: 5px 10px; line-height: 1.2; background: #13233D; box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .4); } .gpr-mk--r1 > span { top: 22px; } .gpr-mk--r2 > span { top: 66px; } .gpr-mk--r3 > span { top: 110px; } .gpr-mk--al > span { transform: translateX(-14px); } .gpr-mk--ar > span { transform: translateX(calc(-100% + 14px)); } .gpr-mk b { display: block; font: 700 12.5px/1.2 var(--f-title); color: #fff; } .gpr-mk small { display: block; font: 800 11px/1.2 var(--f-label); color: #F5A524; } .gpr-tl__ml { display: none; list-style: none; margin-top: 16px; padding-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) left top / 100% 1px no-repeat; } .gpr-tl__ml li { display: grid; gap: 2px; padding: 10px 12px; font-size: 13px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .gpr-tl__ml i { display: grid; place-items: center; width: 22px; height: 22px; font: 900 12px/1 var(--f-title); font-style: normal; color: #1b1b1b; background: #F5A524; } .gpr-tl__ml b { margin-top: 6px; font-weight: 700; } .gpr-tl__ml span { font: 700 12px/1.2 var(--f-label); color: rgba(243, 243, 243, .55); } @media (max-width: 699px) { .gpr-tl { padding: 18px 14px; } .gpr-tl__r { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; } .gpr-tl__n b { font-size: 11.5px; } .gpr-tl__axw span { font-size: 9px; } .gpr-tl__axw span:nth-child(even) { display: none; } .gpr-tl__bars::after { left: calc(104px + (100% - 104px) * .875); } .gpr-tl__mr { display: none; } .gpr-tl__ml { display: grid; } } @media (min-width: 1000px) { .gpr-tl { padding: 28px 30px 26px; } } .gpr-f5 { list-style: none; display: grid; gap: 4px; margin-top: 12px; } .gpr-f5 > li { padding: 20px 20px 16px; background: var(--bg-light); box-shadow: inset 0 3px 0 var(--c); } .gpr-f5__n { font: 700 11px/1 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--c); } .gpr-f5 h3 { margin-top: 6px; font: 700 17px/1.3 var(--f-title); letter-spacing: -.2px; } .gpr-f5 ul { list-style: none; margin-top: 10px; padding-top: 6px; background: var(--h-dash) left top / 100% 1px no-repeat; } .gpr-f5 ul li { position: relative; padding: 5px 0 5px 16px; font-size: 14px; line-height: 1.45; color: var(--muted); } .gpr-f5 ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--c); } @media (min-width: 700px) { .gpr-f5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gpr-f5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- Planejamento: 7 passos ---------- */ .gpr-s7 { position: relative; list-style: none; display: grid; gap: 12px; } .gpr-s7::before { content: ""; position: absolute; left: 22px; top: 23px; bottom: 23px; width: 3px; background: linear-gradient(180deg, #3D8BFF, #00BF63); transform-origin: top; transition: transform 1.4s var(--ease-io-quad) .2s; } .js-reveal .gpr-s7:not(.is-in)::before { transform: scaleY(0); } .gpr-s7 li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; } .gpr-s7 i { z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 800 14px/1 var(--f-title); font-style: normal; color: #fff; background: linear-gradient(135deg, #1F5FBF, #07142b); box-shadow: 0 0 0 5px var(--bg-light), 0 8px 18px rgba(7, 20, 43, .25); transition: transform .5s var(--ease-out-circ), opacity .4s; transition-delay: calc(.2s + var(--i) * .15s); } .gpr-s7 li:nth-child(3) i { color: #1b1b1b; background: #F5A524; } .js-reveal .gpr-s7:not(.is-in) i { opacity: 0; transform: scale(.5); } .gpr-s7 li > div { padding: 12px 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: opacity .5s, transform .6s var(--ease-out-circ); transition-delay: calc(.3s + var(--i) * .15s); } .js-reveal .gpr-s7:not(.is-in) li > div { opacity: 0; transform: translateY(10px); } .gpr-s7 b { display: block; font: 700 15px/1.25 var(--f-title); } .gpr-s7 span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--muted); } @media (min-width: 1100px) { .gpr-s7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .gpr-s7::before { left: 7%; right: 7%; top: 22px; bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, #3D8BFF, #00BF63); transform-origin: left; } .js-reveal .gpr-s7:not(.is-in)::before { transform: scaleX(0); } .gpr-s7 li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; } .gpr-s7 li > div { align-self: stretch; width: 100%; } } .gpr-sup { margin-top: 32px; padding: 22px 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .gpr-sup__t { font: 700 16px/1.3 var(--f-title); } .gpr-sup__w { overflow-x: auto; margin-top: 12px; } .gpr-sup__tb { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; } .gpr-sup__tb th { padding: 8px 12px; text-align: left; font: 700 11px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid rgba(7, 20, 43, .12); } .gpr-sup__tb td { padding: 12px; color: rgba(0, 0, 0, .75); background: var(--h-dash) left bottom / 100% 1px no-repeat; } .gpr-sup__tb strong { color: var(--navy); } .gpr-cls { display: inline-grid; place-items: center; width: 28px; height: 28px; font: 700 14px/1 var(--f-title); color: #fff; } .gpr-cls--a { background: #E5484D; } .gpr-cls--b { background: #F5A524; } .gpr-cls--c { background: var(--blue); } .gpr-cls--d { background: #0EB3A0; } @media (min-width: 1000px) { .gpr-sup { padding: 26px 28px; } } /* ---------- Contratações: setas ---------- */ .gpr-chev { list-style: none; display: grid; gap: 6px; } .gpr-chev li { position: relative; padding: 16px 20px; color: #fff; background: var(--c); transition: opacity .5s, transform .6s var(--ease-out-circ), filter .2s; transition-delay: calc(.15s + var(--i) * .12s), calc(.15s + var(--i) * .12s), 0s; } .js-reveal .gpr-chev:not(.is-in) li { opacity: 0; transform: translateX(-14px); } .gpr-chev li:hover { filter: brightness(1.12); } .gpr-chev small { font: 700 11px/1 var(--f-label); letter-spacing: 1px; color: rgba(255, 255, 255, .7); } .gpr-chev b { display: block; margin-top: 4px; font: 700 16px/1.25 var(--f-title); } .gpr-chev span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85); } @media (min-width: 700px) { .gpr-chev { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gpr-chev { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gpr-chev li { min-height: 108px; margin-right: -12px; padding: 16px 30px 16px 28px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); } .gpr-chev li:first-child { padding-left: 22px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); } .gpr-chev li:last-child { margin-right: 0; } } .gpr-cc { display: grid; gap: 12px; margin-top: 16px; } .gpr-cc__c { padding: 24px 22px 14px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1), inset 0 3px 0 var(--blue); } .gpr-cc__c h3 { margin-bottom: 8px; font: 700 18px/1.3 var(--f-title); color: #fff; } .gpr-cc--3 { margin-top: 0; } @media (min-width: 900px) { .gpr-cc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gpr-cc__c { padding: 28px 28px 16px; } } @media (min-width: 1100px) { .gpr-cc--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Prontidão ---------- */ .gpr-pr { display: grid; gap: 12px; } .gpr-pr__c { display: flex; flex-direction: column; background: var(--bg-light); } .gpr-pr__h { position: relative; overflow: hidden; padding: 16px 20px; color: #fff; background: var(--c); } .gpr-pr__h::after { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .12); } .gpr-pr__h b { display: block; font: 700 17px/1.25 var(--f-title); } .gpr-pr__h span { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .85); } .gpr-pr__l { list-style: none; counter-reset: gpr; padding: 8px 20px 14px; } .gpr-pr__l li { counter-increment: gpr; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; font-size: 14.5px; line-height: 1.4; color: rgba(0, 0, 0, .75); background: var(--h-dash) left top / 100% 1px no-repeat; } .gpr-pr__l li:first-child { background: none; } .gpr-pr__l li::before { content: counter(gpr); display: grid; place-items: center; width: 24px; height: 24px; font: 700 12px/1 var(--f-title); color: #fff; background: var(--c); } .gpr-pr__l--s li { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 0; } .gpr-pr__l--s li::before { width: 30px; height: 30px; } .gpr-pr__l b { display: block; font: 700 15px/1.3 var(--f-title); color: var(--navy); } .gpr-pr__l b + span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); } .gpr-pr__f { margin: auto 20px 18px; padding: 9px 12px; font: 700 13.5px/1.3 var(--f-title); color: var(--logo-blue); background: rgba(14, 118, 255, .1); } @media (min-width: 1000px) { .gpr-pr { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Cronograma: controles, cronograma, notebook ---------- */ .gpr-pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 14px 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .gpr-pc__l span { display: block; font: 700 10.5px/1.2 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); } .gpr-pc__l b { font: 700 15px/1.3 var(--f-title); white-space: nowrap; } .gpr-pc__t { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; } .gpr-pc__t button { padding: 7px 2px; border: 0; cursor: pointer; font: 700 12px/1.2 var(--f-title); color: rgba(7, 20, 43, .6); background: var(--bg-light); transition: background-color .15s, color .15s; } .gpr-pc__t button small { display: block; font-size: 10.5px; font-weight: 600; opacity: .85; } .gpr-pc__t button:hover { background: #e9eef6; } .gpr-pc__t button.is-past { color: var(--logo-blue); background: #e4eeff; } .gpr-pc__t button[aria-pressed="true"] { color: #fff; background: var(--blue); } .gpr-pc__a { display: flex; gap: 4px; } .gpr-pc__a button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 10px; border: 0; cursor: pointer; font: 700 13px/1 var(--f-title); color: var(--navy); background: var(--bg-light); transition: background-color .15s, color .15s; } .gpr-pc__a button:hover { color: var(--blue); background: #e9eef6; } .gpr-pc__a .gpr-pc__pl { color: #fff; background: var(--blue); } .gpr-pc__a .gpr-pc__pl:hover { color: #fff; background: var(--logo-blue); } .gpr-pc__a button[hidden] { display: none; } .gpr-pc__a svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gpr-pc__a .gpr-pc__pl svg { fill: currentColor; stroke: none; } .gpr-pc__h { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--muted); } .gpr-pc__t button:focus-visible, .gpr-pc__a button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (min-width: 900px) { .gpr-pc { grid-template-columns: auto minmax(0, 1fr) auto; } .gpr-pc__t { grid-column: auto; grid-row: auto; } .gpr-pc__h { margin-top: -6px; } } @media (max-width: 519px) { .gpr-pc { grid-template-columns: 1fr; } .gpr-pc__a { flex-wrap: wrap; } .gpr-pc__a .gpr-pc__fs { margin-left: auto; } .gpr-pc__t button { font-size: 11px; padding: 6px 0; } .gpr-pc__t button small { font-size: 9.5px; } } .gpr-gp { display: grid; gap: 16px; margin-top: 12px; } .gpr-gt { min-width: 0; margin: 0; padding: 22px 20px 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .gpr-gt__w { overflow-x: auto; } .gpr-gt__in { min-width: 520px; } .gpr-gt__r { display: grid; grid-template-columns: 18px minmax(120px, 1.15fr) 38px 92px 2fr; gap: 8px; align-items: center; padding: 7px 0; font-size: 13px; background: var(--h-dash) left top / 100% 1px no-repeat; transition: background-color .15s; } .gpr-gt__hd { padding-top: 0; font: 700 11px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: rgba(7, 20, 43, .5); background: none; } .gpr-gt__r > span:first-child { color: rgba(7, 20, 43, .45); } .gpr-gt__t { font-weight: 700; color: var(--navy); } .gpr-gt__p { text-align: right; font-weight: 700; } .gpr-gt__body .gpr-gt__r[data-area] { cursor: pointer; } .gpr-gt__body .gpr-gt__r[data-area]:hover { background-color: #f4f8fd; } .gpr-gt__body .gpr-gt__r.is-sel { background-color: #eaf2ff; } .gpr-gt__body .gpr-gt__r:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .gpr-gt__wk { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); font-size: 10px; } .gpr-gt__wk span { text-align: center; } .gpr-gt__now { position: absolute; top: -4px; transform: translateX(-50%); padding: 2px 6px; font: 700 10px/1 var(--f-label); letter-spacing: 0; text-transform: none; color: #fff; background: #E5484D; transition: left .5s ease; } .gpr-gt__b { position: relative; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 8 - 1px), #eef1f6 calc(100% / 8 - 1px) calc(100% / 8)); } .gpr-gt__b i { position: absolute; top: 2px; bottom: 2px; overflow: hidden; background: #c9d6ea; } .gpr-gt__b em { display: block; height: 100%; background: linear-gradient(90deg, var(--logo-blue), var(--blue)); transition: width .5s ease; } .gpr-gt__line { position: absolute; top: -8px; bottom: -8px; z-index: 1; width: 0; border-left: 2px dashed #E5484D; transition: left .5s ease; } .ci-st--lt { color: #C93A3E; background: #FDE8E8; } /* notebook */ .gpr-nb { min-width: 0; } .gpr-nb__scr { position: relative; padding: 18px 14px 14px; border-radius: 16px 16px 4px 4px; background: #1B1E24; box-shadow: 0 30px 60px rgba(7, 20, 43, .28), inset 0 0 0 2px #2C3038; } .gpr-nb__cam { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3A3F48; } .gpr-nb__view { position: relative; overflow: hidden; background: #EEF2F7; } .gpr-nb__in { position: relative; width: 760px; transform-origin: 0 0; } .gpr-nb__base { position: relative; height: 16px; margin: 0 -4%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#D5DAE2, #AEB5C0); box-shadow: 0 14px 24px rgba(7, 20, 43, .18); } .gpr-nb__base span { position: absolute; left: 50%; top: 0; width: 16%; height: 6px; margin-left: -8%; border-radius: 0 0 8px 8px; background: #9AA2AF; } .gpr-nb__cap { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); } .gpr-nb:not(.is-fs) .gpr-nb__view { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6B7A90 #1B1E24; } .gpr-nb__x { display: none; } .gpr-nb.is-fs { position: fixed; inset: 0; z-index: 1000; overflow: auto; padding: 68px 20px 28px; background: #070D19; } .gpr-nb.is-fs > .gpr-pc, .gpr-nb.is-fs > .gpr-nb__scr { max-width: 1280px; margin-left: auto; margin-right: auto; } .gpr-nb.is-fs > .gpr-pc { margin-bottom: 14px; } .gpr-nb.is-fs .gpr-nb__base, .gpr-nb.is-fs .gpr-nb__cap, .gpr-nb.is-fs .gpr-nb__cam, .gpr-nb.is-fs .gpr-pc__h { display: none; } .gpr-nb.is-fs .gpr-nb__scr { padding: 8px; border-radius: 0; overflow-x: auto; } .gpr-nb.is-fs .gpr-nb__in { width: 1040px; } .gpr-nb.is-fs .gpr-nb__x { position: fixed; top: 14px; right: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; cursor: pointer; font: 700 14px/1 var(--f-title); color: var(--navy); background: #fff; } .gpr-nb__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } body.gpr-lock { overflow: hidden; } @media (min-width: 1100px) { .gpr-gp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .gpr-gt { padding: 26px 26px 22px; } .gpr-gt__in { min-width: 0; } } @media (max-width: 559px) { .gpr-nb__base { margin: 0 -3%; } .gpr-nb__scr { padding: 12px 8px 8px; } } .gpr-notes { margin-top: 28px; } @media (min-width: 900px) { .gpr-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gpr-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* painel dentro do notebook (montado no js/paradas.js) */ .pd { --pn: #07142b; --pb: #0e76ff; --pg: #8A99AE; --pl: #E3E8EF; --pt: #13233D; --pm: #5B6B82; --ok: #0A8F4E; --okb: #E2F5EA; --bd: #D93A3F; --bdb: #FDE8E8; display: grid; gap: 12px; padding: 14px; font-family: var(--f-title); font-size: 13px; line-height: 1.4; color: var(--pt); background: #EEF2F7; } .pd * { box-sizing: border-box; } .pd-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: #fff; background: var(--pn); } .pd-top img { flex: none; width: auto; height: 26px; } .pd-ti { flex: 1; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .16); } .pd-ti b { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; } .pd-ti span { font-size: 11.5px; color: #9FB2CC; } .pd-st { display: grid; gap: 4px; justify-items: end; text-align: right; } .pd-st small { font-size: 11px; color: #9FB2CC; } .pd-st small b { color: #fff; font-weight: 700; } .pd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 11.5px; font-weight: 800; } .pd-pill.ok { color: #4BE39A; background: rgba(0, 191, 99, .16); } .pd-pill.bad { color: #FF8F92; background: rgba(229, 72, 77, .18); } .pd-pill svg { width: 12px; height: 12px; } .pd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pd-c { min-width: 0; padding: 14px 16px; background: #fff; box-shadow: inset 0 0 0 1px #E1E7EF; } .pd-k { display: flex; flex-direction: column; gap: 6px; } .pd-kl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pm); } .pd-kv { font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -.01em; color: var(--pt); } .pd-kv small { margin-left: 2px; font-size: 14px; font-weight: 600; color: var(--pm); } .pd-ks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--pm); } .pd-ks b { color: var(--pt); } .pd-m { position: relative; height: 6px; margin-top: auto; background: var(--pl); } .pd-m i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pb); transition: width .5s ease; } .pd-m s { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--pn); } .pd-m.nv i { background: var(--pn); } .pd-stk { display: flex; gap: 2px; height: 6px; margin-top: auto; } .pd-stk i { display: block; min-width: 0; height: 100%; } .pd-lg { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--pm); } .pd-lg span { display: inline-flex; align-items: center; gap: 5px; } .pd-lg i { display: inline-block; width: 8px; height: 8px; } .pd-ch { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 11px; font-weight: 800; white-space: nowrap; } .pd-ch.ok { color: var(--ok); background: var(--okb); } .pd-ch.bad { color: var(--bd); background: var(--bdb); } .pd-ch svg { width: 9px; height: 9px; } .pd-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .pd-h h4 { flex: 1; min-width: 0; margin: 0; font-weight: 700; font-size: 14px; color: var(--pt); } .pd-hint { font-size: 11px; color: var(--pg); } .pd-ll { display: flex; gap: 14px; font-size: 11.5px; color: var(--pm); } .pd-ll span { display: inline-flex; align-items: center; gap: 6px; } .pd-ll svg { width: 22px; height: 8px; } .pd-sw { position: relative; } .pd-sv { display: block; width: 100%; height: auto; overflow: visible; } .pd-sv .gr line { stroke: #E8EDF3; } .pd-sv text { font-family: var(--f-title); fill: #7A8AA0; font-size: 11px; } .pd-sv .ar { fill: url(#pdg); } .pd-sv .lr { fill: none; stroke: var(--pb); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .pd-sv .lp { fill: none; stroke: var(--pg); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; } .pd-sv .dr { fill: var(--pb); stroke: #fff; stroke-width: 2; } .pd-sv .dp { fill: #fff; stroke: var(--pg); stroke-width: 1.5; } .pd-sv .ct { stroke: var(--pn); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; } .pd-sv .ctl { fill: var(--pn); font-weight: 800; font-size: 10.5px; } .pd-sv .vl rect { fill: var(--pb); } .pd-sv .vl text { fill: #fff; font-weight: 800; font-size: 11px; } .pd-sv .vp { fill: var(--pm); font-weight: 700; font-size: 11px; } .pd-sv .hz { fill: transparent; cursor: pointer; } .pd-sv .xh { stroke: var(--pn); stroke-opacity: .2; } .pd-tt { position: absolute; z-index: 2; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; white-space: nowrap; color: #fff; background: var(--pn); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .12s; box-shadow: 0 8px 20px rgba(7, 20, 43, .25); } .pd-tt.on { opacity: 1; } .pd-tt b { display: block; font-size: 11px; font-weight: 700; color: #9FB2CC; } .pd-tt i { display: inline-block; width: 10px; height: 3px; margin-right: 6px; vertical-align: middle; } .pd-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; } .pd-ars { display: grid; gap: 2px; } .pd-ar { display: grid; grid-template-columns: 118px minmax(0, 1fr) 40px 62px; gap: 10px; align-items: center; margin: 0 -8px; padding: 7px 8px; cursor: pointer; transition: background-color .15s, opacity .15s; } .pd-ar:hover { background: #F3F7FC; } .pd-ar:focus-visible { outline: 2px solid var(--pb); outline-offset: -2px; } .pd-ar b { overflow: hidden; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } .pd-ar b small { margin-right: 4px; font-weight: 600; color: var(--pg); } .pd-ar em { text-align: right; font-size: 12.5px; font-style: normal; font-weight: 800; } .pd-ar .pd-ch { justify-self: end; } .pd-ar .pd-m { margin: 0; } .pd-ars.flt .pd-ar { opacity: .4; } .pd-ars.flt .pd-ar.on { opacity: 1; background: #EAF2FF; } .pd-sf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; background: var(--okb); } .pd-sf svg { flex: none; width: 22px; height: 22px; color: var(--ok); } .pd-sf b { display: block; font-size: 20px; line-height: 1; color: var(--ok); } .pd-sf span { font-size: 11.5px; color: #2F6B4C; } .pd-sl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; } .pd-sl div { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0; font-size: 12px; color: var(--pm); border-bottom: 1px solid #EEF2F7; } .pd-sl div b { font-weight: 800; color: var(--pt); } .pd-crs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pd-cr { display: grid; gap: 8px; padding: 10px 12px; box-shadow: inset 0 0 0 1px #E1E7EF; } .pd-crh { display: flex; align-items: flex-start; gap: 8px; } .pd-tag { flex: none; padding: 2px 6px; font: 700 10.5px/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--pm); background: #EEF2F7; } .pd-crh b { font-size: 12.5px; line-height: 1.3; } .pd-crf { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--pm); } .pd-crf b { color: var(--pt); } .pd-fc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 0; cursor: pointer; font: 700 11px/1.3 var(--f-title); color: #fff; background: var(--pb); } .pd-tw { overflow-x: auto; margin: 0 -16px -14px; } .pd table { width: 100%; border-collapse: collapse; font-size: 12px; } .pd th { padding: 8px 10px; text-align: left; white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pm); background: #F6F8FB; border-top: 1px solid #E8EDF3; border-bottom: 1px solid #E8EDF3; } .pd td { padding: 9px 10px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid #EEF2F7; } .pd td.n, .pd th.n { text-align: right; } .pd td.wr { min-width: 150px; white-space: normal; } .pd td small { display: block; font-size: 11px; color: var(--pg); } .pd tr:last-child td { border-bottom: 0; } .pd-emp { padding: 16px; text-align: center; font-size: 12px; color: var(--pg); } .pd-crs .pd-emp { grid-column: 1 / -1; } .gpr-nb.is-fs .pd { gap: 14px; padding: 18px; } /* ---------- Aplicativo ---------- */ .gpr-app { display: grid; background: var(--bg-light); } .gpr-app__fig { margin: 0; padding: 18px 10px 14px; background: linear-gradient(160deg, #eef3fb, #dfe7f3); } .gpr-app__frame { display: block; width: 100%; height: 640px; border: 0; background: transparent; } .gpr-app__fig figcaption { margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted); } .gpr-app__tx h3 { margin-top: 10px; } @media (min-width: 1000px) { .gpr-app { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .gpr-app__tx { align-self: center; } } /* ---------- Desafios ---------- */ .gpr-fl { display: grid; gap: 12px; } .gpr-fl__side { list-style: none; display: grid; gap: 4px; } main .gpr-fl__ok { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding-top: 12px; font-size: 14px; color: rgba(243, 243, 243, .92); background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .18) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .gpr-fl__ok::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; font: 700 11px/1 var(--f-title); color: #fff; background: #0aa355; } .gpr-fl__ch { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 22px 20px 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .gpr-fl__ch ol { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 6px; } .gpr-fl__ch li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 3px 0; } .gpr-fl__ch li > span:first-child { text-align: right; font-size: 14.5px; line-height: 1.3; color: rgba(0, 0, 0, .7); } .gpr-fl__b { position: relative; height: 24px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #EEF1F6 calc(25% - 1px) 25%); } .gpr-fl__b i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: #B9C8E0; transform-origin: left; transition: transform 1s var(--ease-out-circ); transition-delay: calc(.2s + var(--d) * 45ms); } .gpr-fl__b em { position: absolute; top: 50%; left: calc(var(--w) + 8px); transform: translateY(-50%); font: 900 14px/1 var(--f-title); font-style: normal; color: var(--muted); transition: opacity .4s; transition-delay: calc(.8s + var(--d) * 45ms); } .js-reveal .gpr-fl:not(.is-in) .gpr-fl__b i { transform: scaleX(0); } .js-reveal .gpr-fl:not(.is-in) .gpr-fl__b em { opacity: 0; } .gpr-fl__ch li.is-hot > span:first-child { font-weight: 700; color: var(--navy); } .gpr-fl__ch li.is-hot .gpr-fl__b i { background: linear-gradient(90deg, var(--logo-blue), var(--blue)); } .gpr-fl__ch li.is-hot .gpr-fl__b em { color: var(--blue); } .gpr-fl__ax { position: relative; height: 22px; margin: 8px 0 0 314px; } .gpr-fl__ax span { position: absolute; transform: translateX(-50%); font: 700 11.5px/1 var(--f-label); color: #8A99AE; } @media (min-width: 700px) and (max-width: 1099px) { .gpr-fl__side { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gpr-fl { grid-template-columns: minmax(0, 370px) minmax(0, 1fr); } .gpr-fl__ch { padding: 26px 28px 20px; } } @media (max-width: 699px) { .gpr-fl__ch { padding: 18px 16px 14px; } .gpr-fl__ch li { grid-template-columns: 1fr; gap: 4px; padding: 6px 0; } .gpr-fl__ch li > span:first-child { text-align: left; font-size: 13px; } .gpr-fl__b { margin-right: 40px; } .gpr-fl__ax { margin: 8px 40px 0 0; } } /* ---------- Governança: ferramentas ---------- */ .gpr-tls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .gpr-tls b { margin-right: 6px; font: 700 12px/1 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(243, 243, 243, .6); } .gpr-tls span { padding: 8px 14px; font: 700 14px/1 var(--f-title); background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .14); } @media (prefers-reduced-motion: reduce) { .gpr-tl__t i, .gpr-mk, .gpr-s7::before, .gpr-s7 i, .gpr-s7 li > div, .gpr-chev li, .gpr-fl__b i, .gpr-fl__b em { transition: none !important; } } /* Gestão de Paradas: celular 3D do Gerenciamento de Projetos (substitui o iframe solto) */ .gpr-app3d { margin-bottom: 0; } main .gpr-app3d__note { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: rgba(243, 243, 243, .6); text-align: left; } @media (min-width: 1000px) { .gpr-app3d { margin-bottom: 0; } } /* celular do tamanho do bloco de texto, centrado com ele (no Gerenciamento ele é maior e descia abaixo da lista) */ .gpr-app3d { align-items: center; } .gpr-app3d .gp-app__stage { height: auto; padding: 0 0 36px; } .gpr-app3d .gp-phone__floor { bottom: 0; width: 240px; } @media (min-width: 1000px) { .gpr-app3d .gp-phone { width: 330px; } .gpr-app3d .gp-phone__floor { width: 280px; } .gpr-app3d .gp-app__stage { margin-top: -120px; } } /* Cronograma: os 4 cartões de rotina ficam sob o cronograma, ao lado do notebook (sem buraco) */ .gpr-gt__line { margin-left: -2px; } .gpr-gp > .gpr-notes { margin-top: 0; } @media (min-width: 1100px) { .gpr-gp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; } .gpr-gp > .gpr-gt { grid-column: 1; grid-row: 1; } .gpr-gp > .gpr-nb { grid-column: 2; grid-row: 1 / span 2; } .gpr-gp > .gpr-notes { grid-column: 1; grid-row: 2; align-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } } /* base do notebook não pode passar da coluna (antes tinha margem negativa e invadia os cartões): a tela encolhe e a base fica na largura da coluna */ .gpr-nb:not(.is-fs) .gpr-nb__scr { margin: 0 4%; } .gpr-nb .gpr-nb__base { margin: 0; } /* Gestão de Paradas: selos do topo sem o quadro branco, como no PCM (PMI em versão negativa: Imagens/solucoes/gestao-paradas/pmi-negativo.png) */ .gpr-hero .gpr-selos__pmi img { height: 52px; } /* ================================================================= GESTÃO DE ESTOCÁVEIS (2026-10-26): página feita do HTML-modelo do cliente (textos, ordem das seções e vídeo dele), no visual do site. Vídeo e capa em Imagens/solucoes/estocaveis/. Sem JS próprio. ================================================================= */ /* ---------- Listas numeradas (vídeo, diagnóstico, base técnica) ---------- */ .ge-num { list-style: none; counter-reset: ge; margin-top: 28px; } .ge-num li { counter-increment: ge; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 0; background: var(--h-dash) left top / 100% 1px no-repeat; } .ge-num li:first-child { background: none; } .ge-num li::before { content: counter(ge); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; font: 700 15px/1 var(--f-title); color: #fff; background: var(--blue); } .ge-num b { font: 700 17px/1.3 var(--f-title); letter-spacing: -.2px; } .ge-num span { margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); } .ge-num--box { display: grid; grid-auto-rows: 1fr; gap: 4px; margin-top: 0; } .ge-num--box li, .ge-num--box li:first-child { padding: 18px 20px; background: #fff; } .sec--white .ge-num--box li { background: var(--bg-light); } /* ---------- Vídeo no celular ---------- */ .ge-vd { display: grid; gap: 40px; align-items: center; } .ge-vd__ph { width: 100%; max-width: 320px; margin: 0 auto; } .ge-vd__f { padding: 10px; border-radius: 34px; background: #0b0e14; box-shadow: 0 30px 60px rgba(7, 20, 43, .28), inset 0 0 0 2px #2c3038; } .ge-vd__f video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 26px; background: #000; } .ge-vd__ph figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; } @media (min-width: 900px) { .ge-vd { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; } .ge-vd__ph { max-width: none; } } /* ---------- Método: frase, 5 etapas, governança ---------- */ .ge-qt { padding: 24px 28px; font: 600 clamp(18px, 1.6vw, 22px)/1.4 var(--f-title); letter-spacing: -.2px; color: #fff; text-align: center; background: var(--navy); } main .ge-qt { text-align: center; } .ge-steps { list-style: none; display: grid; gap: 4px; margin-top: 4px; } .ge-steps > li { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; background: #fff; box-shadow: inset 0 4px 0 var(--c); transition: box-shadow .3s, transform .3s var(--ease-out-circ); } .ge-steps > li:hover { transform: translateY(-3px); box-shadow: inset 0 4px 0 var(--c), 0 16px 34px rgba(7, 20, 43, .1); } .ge-steps__n { font: 700 11px/1.2 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--c); } .ge-steps h3 { margin-top: 6px; font: 700 20px/1.2 var(--f-title); letter-spacing: -.3px; } .ge-steps h3 a { color: inherit; text-decoration: none; } .ge-steps h3 a::after { content: ""; position: absolute; inset: 0; } .ge-steps ul { list-style: none; margin-top: 12px; } .ge-steps ul li { position: relative; padding: 5px 0 5px 16px; font-size: 14.5px; line-height: 1.4; color: var(--muted); } .ge-steps ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--c); } .ge-steps__go { margin-top: auto; padding-top: 14px; font: 700 13px/1 var(--f-title); color: var(--logo-blue); } .ge-gov { display: grid; gap: 6px; margin-top: 4px; padding: 20px 24px; color: #fff; background: var(--logo-blue); } main .ge-gov { text-align: left; } .ge-gov b { font: 700 13px/1.2 var(--f-label); letter-spacing: 2.4px; text-transform: uppercase; } .ge-gov span { font-size: 16px; line-height: 1.45; color: #e4eeff; } @media (min-width: 700px) { .ge-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ge-gov { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; } } @media (min-width: 1100px) { .ge-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- Duas colunas (diagnóstico, base técnica) ---------- */ .ge-two { display: grid; gap: 4px; } @media (min-width: 1000px) { .ge-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ge-two--tree { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } /* ---------- Maturidade em 4 pilares ---------- */ .ge-mat { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--bg-light); box-shadow: inset 0 4px 0 var(--blue); } .ge-mat__h b { display: block; font: 700 19px/1.25 var(--f-title); letter-spacing: -.2px; } .ge-mat__h span { font-size: 13.5px; color: var(--muted); } .ge-mat__p { list-style: none; display: grid; gap: 4px; } .ge-mat__p li { padding: 14px 16px; background: #fff; } .ge-mat__p b { display: block; font: 700 15px/1.3 var(--f-title); color: #b87500; } .ge-mat__p span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); } .ge-mat__s { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: auto; } .ge-mat__s li { padding: 10px 6px; font: 700 12px/1.25 var(--f-title); color: #fff; text-align: center; background: var(--c); } @media (min-width: 560px) { .ge-mat__p { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ge-mat__s { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- Árvore de máquina ---------- */ .ge-tree { padding: 24px; background: #fff; } .ge-tree__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 16px; } .ge-tree__h b { font: 700 19px/1.25 var(--f-title); letter-spacing: -.2px; } .ge-tree__h span { font: 700 11.5px/1.2 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); } .ge-tree__l { list-style: none; display: grid; gap: 6px; } .ge-tree__l li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: center; margin-left: calc(var(--d) * 8px); padding: 8px 12px; background: var(--bg-light); box-shadow: inset 4px 0 0 var(--c); } .ge-tree__l i { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; font: 700 12.5px/1 var(--f-title); font-style: normal; color: #fff; background: var(--c); } .ge-tree__l b { font: 700 14.5px/1.3 var(--f-title); } .ge-tree__l em { font-size: 13.5px; color: var(--muted); } @media (min-width: 620px) { .ge-tree__l li { grid-template-columns: 26px auto minmax(0, 1fr); margin-left: calc(var(--d) * 18px); } .ge-tree__l i { grid-row: auto; } .ge-tree__l em { text-align: right; } } /* ---------- Criticidade e política (fundo escuro) ---------- */ .ge-cr { display: grid; gap: 12px; } .ge-cr__c { padding: 24px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .ge-cr__c h3 { font: 700 19px/1.25 var(--f-title); color: #fff; } .ge-xyz { list-style: none; display: grid; gap: 8px; margin-top: 16px; } .ge-xyz li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 4px 0 0 var(--c); } .ge-xyz li > b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; font: 800 20px/1 var(--f-title); color: #111; background: var(--c); } .ge-xyz strong { display: block; font: 700 16px/1.3 var(--f-title); color: #fff; } .ge-xyz span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: rgba(243, 243, 243, .75); } main .ge-cr__n { margin-top: 14px; font-size: 14px; line-height: 1.45; color: rgba(243, 243, 243, .6); text-align: left; } .ge-mx { display: grid; gap: 6px; margin-top: 16px; } .ge-mx > div { display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 6px; } .ge-mx [role="columnheader"] { padding: 4px 2px; font: 700 11px/1.25 var(--f-label); letter-spacing: .6px; text-transform: uppercase; color: rgba(243, 243, 243, .6); text-align: center; } .ge-mx b { display: grid; place-items: center; font: 800 18px/1 var(--f-title); color: #111; background: var(--c); } .ge-mx [role="cell"] { display: grid; place-items: center; min-height: 72px; padding: 12px 4px; font: 700 12px/1.3 var(--f-title); color: #fff; text-align: center; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } @media (max-width: 399px) { .ge-mx, .ge-mx > div { gap: 4px; } .ge-mx > div { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); } } @media (min-width: 400px) { .ge-mx [role="cell"] { font-size: 13px; padding-inline: 6px; } } @media (min-width: 560px) { .ge-mx [role="cell"] { font-size: 14px; } } @media (min-width: 1000px) { .ge-cr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; } } /* ---------- Faixa de etiquetas (perfis, ferramentas) ---------- */ .ge-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; } .ge-tags b { margin-right: 8px; font: 700 12px/1.2 var(--f-label); letter-spacing: 1.6px; text-transform: uppercase; color: rgba(243, 243, 243, .6); } .ge-tags span { padding: 9px 14px; font: 700 14px/1.2 var(--f-title); color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .14); } /* ---------- Rotina: fluxo em 6 passos + rotinas ---------- */ .ge-flow { position: relative; list-style: none; display: grid; gap: 12px; } .ge-flow li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; transition: opacity .6s var(--ease-io-quad), transform .7s var(--ease-out-circ); transition-delay: calc(var(--i) * .12s); } .js-reveal .ge-flow:not(.is-in) li { opacity: 0; transform: translateY(14px); } .ge-flow i { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 800 14px/1 var(--f-title); font-style: normal; color: #fff; background: linear-gradient(135deg, #1f5fbf, #07142b); box-shadow: 0 0 0 5px var(--bg-light); } .ge-flow li > div { padding: 14px 16px; background: #fff; } .ge-flow b { display: block; font: 700 16px/1.3 var(--f-title); } .ge-flow span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); } @media (min-width: 700px) { .ge-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; } .ge-flow li { grid-template-columns: 1fr; justify-items: center; row-gap: 14px; text-align: center; } .ge-flow li > div { width: 100%; height: 100%; } } @media (min-width: 1100px) { .ge-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ge-flow::before { content: ""; position: absolute; left: 8.3%; right: 8.3%; top: 22px; height: 3px; background: linear-gradient(90deg, #3d8bff, #00bf63); transform-origin: left; transition: transform 1.4s var(--ease-io-quad); } .js-reveal .ge-flow:not(.is-in)::before { transform: scaleX(0); } } .ge-rot { display: grid; gap: 4px; margin-top: 32px; } .ge-rot__c { background: #fff; } .ge-rot__h { position: relative; overflow: hidden; padding: 16px 20px; color: #fff; background: var(--c); } .ge-rot__h::after { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .12); } .ge-rot__h b { display: block; font: 700 17px/1.25 var(--f-title); } .ge-rot__h span { display: block; font-size: 13px; opacity: .85; } .ge-rot__c ol { list-style: none; counter-reset: gr; padding: 8px 20px 14px; } .ge-rot__c ol li { counter-increment: gr; display: flex; gap: 12px; align-items: center; padding: 9px 0; font-size: 15px; line-height: 1.4; background: var(--h-dash) left bottom / 100% 1px no-repeat; } .ge-rot__c ol li:last-child { background: none; } .ge-rot__c ol li::before { content: counter(gr); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px/1 var(--f-title); color: #fff; background: var(--c); } @media (min-width: 900px) { .ge-rot { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Como a Planning entra (fundo escuro) ---------- */ .ge-in { display: grid; gap: 12px; } .ge-in__c { position: relative; padding: 24px 22px 16px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .ge-in__c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #3d8bff, #00bf63); } .ge-in__c h3 { font: 700 18px/1.25 var(--f-title); color: #fff; } .ge-in__c ul { list-style: none; margin-top: 10px; } .ge-in__c ul li { position: relative; padding: 9px 0 9px 28px; font-size: 14.5px; line-height: 1.45; color: rgba(243, 243, 243, .82); background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .16) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .ge-in__c ul li:first-child { background: none; } .ge-in__c ul li::before { content: "✓"; position: absolute; left: 2px; top: 9px; font: 700 14px/1.45 var(--f-title); color: #4fe39a; } .ge-in__c ul b { color: #fff; } .ge-in__c ol { list-style: none; counter-reset: gn; display: grid; gap: 8px; margin-top: 12px; } .ge-in__c ol li { counter-increment: gn; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 14px; background: rgba(255, 255, 255, .05); } .ge-in__c ol li::before { content: counter(gn); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 14px/1 var(--f-title); color: #fff; background: var(--blue); } .ge-in__c ol b { font: 700 15px/1.3 var(--f-title); color: #fff; } .ge-in__c ol span { font-size: 13.5px; line-height: 1.4; color: rgba(243, 243, 243, .7); } @media (min-width: 1000px) { .ge-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } .ge-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; margin-top: 56px; padding-top: 40px; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .2) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .ge-cta h3 { max-width: 640px; font: 700 clamp(22px, 2.6vw, 30px)/1.25 var(--f-title); letter-spacing: -.4px; color: #fff; } .ge-cta .page-hero__ctas { margin-top: 0; } /* ================================================================= AVALIAÇÃO DE PRODUTIVIDADE (2026-10-27): página feita do HTML-modelo do cliente (textos, ordem das seções e interações), no visual do site. Prefixo .ap-; reaproveita .ge-in, .ge-cta (Estocáveis) e o notebook .gpr-nb (Paradas). Interações em js/ap.js. Cores da medição: produtivo verde, complementar âmbar, não produtivo vermelho (as mesmas do cliente). ================================================================= */ main { --ap-p: #0aa355; --ap-c: #f5a524; --ap-n: #e5484d; } .ap-lg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--muted); } .ap-lg span { display: inline-flex; align-items: center; gap: 7px; } .ap-lg i, .ap-ob__k i { display: inline-block; flex: none; width: 12px; height: 12px; } .ap-lg i.is-p, .ap-ob__k i.is-p { background: var(--ap-p); } .ap-lg i.is-c, .ap-ob__k i.is-c { background: var(--ap-c); } .ap-lg i.is-n, .ap-ob__k i.is-n { background: var(--ap-n); } /* --- Métodos: dois cartões com a cor do método no topo --- */ .ap-mt { display: grid; gap: 16px; } .ap-mt__c { display: flex; flex-direction: column; padding: 28px 26px 24px; background: var(--bg-light); box-shadow: inset 0 4px 0 var(--c); transition: transform .5s var(--ease-out-circ), box-shadow .3s; } .ap-mt__c:hover { transform: translateY(-3px); box-shadow: inset 0 4px 0 var(--c), 0 18px 36px rgba(7, 20, 43, .08); } .ap-mt__h { display: flex; align-items: center; gap: 18px; } .ap-mt__h > span { display: grid; place-items: center; flex: none; width: 64px; height: 64px; font: 800 19px/1 var(--f-title); letter-spacing: .5px; color: #fff; background: var(--c); } .ap-mt__h h3 { font: 700 21px/1.25 var(--f-title); letter-spacing: -.3px; } main .ap-mt__h p { margin-top: 2px; font-size: 15px; color: var(--muted); text-align: left; } .ap-mt__c ul { list-style: none; margin: 20px 0; } .ap-mt__c li { position: relative; padding: 10px 0 10px 28px; font-size: 15px; line-height: 1.45; background: var(--h-dash) left top / 100% 1px no-repeat; } .ap-mt__c li:first-child { background: none; } .ap-mt__c li::before { content: "✓"; position: absolute; left: 2px; top: 10px; font: 800 15px/1.45 var(--f-title); color: var(--c); } main .ap-mt__t { margin-top: auto; padding: 14px 16px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-align: left; background: #fff; box-shadow: inset 3px 0 0 var(--c); } .ap-mt__t b { display: block; margin-bottom: 3px; font: 700 12px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--c); } @media (min-width: 1000px) { .ap-mt { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Topo: menos conteúdo que a PCM, então altura menor e conteúdo centralizado (sem vão em cima) --- */ @media (min-width: 1000px) { .ap-hero.page-hero--mesh { align-items: center; min-height: min(660px, 76vh); padding-bottom: 72px; } } /* --- Campo: tablet de verdade (paisagem 16:10, moldura uniforme, câmera e botões) + resumo com rosca --- */ .ap-ob { display: grid; gap: 16px; } .ap-tab { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: 34px; background: linear-gradient(150deg, #2b3445 0%, #121826 38%, #0b0f18 100%); box-shadow: 0 0 0 1px #3c475b, inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px rgba(7, 20, 43, .28), 0 8px 18px rgba(7, 20, 43, .16); } .ap-tab::before, .ap-tab::after { content: ""; position: absolute; top: -3px; height: 3px; border-radius: 2px 2px 0 0; background: #3c475b; } .ap-tab::before { right: 15%; width: 54px; } /* botão liga/desliga */ .ap-tab::after { right: calc(15% + 70px); width: 34px; } /* volume */ .ap-tab__cam { position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5a78, #1a2232 70%); box-shadow: 0 0 0 1px #222b3b; } .ap-tab__scr { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #000; } .ap-tab__sb { display: flex; justify-content: space-between; align-items: center; padding: 7px 16px; font: 700 11.5px/1.2 var(--f-label); letter-spacing: .3px; color: #c9d6ea; background: var(--navy); } .ap-tab__sb span { display: inline-flex; align-items: center; gap: 6px; } .ap-tab__bat { position: relative; display: inline-block; width: 18px; height: 9px; box-shadow: inset 0 0 0 1.5px #c9d6ea; } .ap-tab__bat::after { content: ""; position: absolute; inset: 2px 5px 2px 2px; background: var(--ap-p); } .ap-og { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; padding: 18px 20px 16px; } .ap-og figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .ap-og figcaption b { font: 700 17px/1.3 var(--f-title); } .ap-og figcaption span { padding: 4px 9px; font: 700 10.5px/1.2 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: #8a99ae; box-shadow: inset 0 0 0 1px currentColor; } .ap-og__w { display: flex; flex: 1; min-height: 0; overflow-x: auto; scrollbar-width: thin; } .ap-og__g { display: grid; flex: 1; grid-template-rows: auto; grid-auto-rows: minmax(24px, 1fr); gap: 4px; min-width: 560px; } .ap-og__r { display: grid; grid-template-columns: 92px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: stretch; } .ap-og__r > span { align-self: center; font: 700 12.5px/1.2 var(--f-title); color: #3d4c63; } .ap-og__r > em { align-self: end; font: 700 10.5px/1 var(--f-label); font-style: normal; white-space: nowrap; color: #8a99ae; } .ap-og__r > :nth-child(16) { margin-left: 6px; } /* intervalo do almoço */ .ap-og__r > i.is-p { --k: var(--ap-p); } .ap-og__r > i.is-c { --k: var(--ap-c); } .ap-og__r > i.is-n { --k: var(--ap-n); } /* cada célula se pinta da esquerda para a direita, coluna a coluna, como a rota do observador */ .ap-og__r > i { display: block; min-height: 24px; background: linear-gradient(var(--k), var(--k)) left / 100% 100% no-repeat, #eef1f6; transition: background-size .35s var(--ease-out-circ); transition-delay: calc(.2s + var(--x) * 55ms + var(--y) * 18ms); } .js-reveal .ap-tab:not(.is-in) .ap-og__r > i { background-size: 0 100%, auto; } .ap-og .ap-lg { margin-top: 12px; } .ap-ob__s { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 28px 24px; background: #fff; } @property --ap-a { syntax: ""; inherits: true; initial-value: 100; } .ap-dn { --ap-a: 100; display: grid; place-items: center; width: 184px; height: 184px; border-radius: 50%; background: conic-gradient(var(--ap-p) 0 calc(var(--p) * var(--ap-a) / 100 * 1%), var(--ap-c) 0 calc((var(--p) + var(--c)) * var(--ap-a) / 100 * 1%), var(--ap-n) 0 calc(var(--ap-a) * 1%), #eef1f6 0); transition: --ap-a 1.6s var(--ease-io-quad) .3s; } .js-reveal .ap-ob__s:not(.is-in) .ap-dn { --ap-a: 0; } .ap-dn > div { display: grid; place-content: center; width: 126px; height: 126px; border-radius: 50%; text-align: center; background: #fff; } .ap-dn b { font: 800 36px/1 var(--f-title); letter-spacing: -1px; } .ap-dn > div > span { margin-top: 4px; font-size: 13px; color: var(--muted); } .ap-ob__k { list-style: none; display: grid; gap: 14px; width: 100%; } .ap-ob__k li { display: flex; align-items: flex-start; gap: 12px; } .ap-ob__k i { width: 14px; height: 14px; margin-top: 4px; } .ap-ob__k b { display: block; font: 700 15px/1.3 var(--f-title); } .ap-ob__k span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); } @media (min-width: 620px) { .ap-tab { aspect-ratio: 16 / 10; } } @media (min-width: 1080px) { .ap-ob { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } .ap-ob__s { align-self: stretch; } } @media (max-width: 619px) { .ap-tab { padding: 12px 12px 26px; border-radius: 22px; } .ap-tab__cam { left: 50%; top: auto; bottom: 10px; margin: 0 0 0 -3.5px; } .ap-tab::before, .ap-tab::after { display: none; } .ap-og { padding: 14px; } .ap-og__g { grid-auto-rows: 26px; } } /* --- Etapas: mesmo desenho das fases do Controle Inicial, em fundo claro: ícone no círculo sobre a linha que se preenche (azul → verde), rótulo da etapa e cartões de mesma altura --- */ .ap-st { position: relative; list-style: none; display: grid; gap: 18px; } .ap-st::before, .ap-st::after { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 3px; } .ap-st::before { background: var(--v-dash); } .ap-st::after { background: linear-gradient(180deg, #3d8bff, #1ba2d6 50%, #00bf63); transform-origin: top; transition: transform 1.6s var(--ease-io-quad) .2s; } .js-reveal .ap-st:not(.is-in)::after { transform: scaleY(0); } .ap-st li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; } .ap-st__node { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 14px; } .ap-st__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 0 0 6px #fff, 0 0 0 7px color-mix(in srgb, var(--c) 40%, transparent), 0 12px 26px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .6s var(--ease-out-circ), opacity .5s; transition-delay: calc(.25s + var(--i) * .22s); } .ap-st__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ap-st__tag { font: 700 11px/1.2 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, #000); text-align: center; white-space: nowrap; padding: 3px 0; background: #fff; } .ap-st__card { padding: 20px 20px 18px; background: var(--bg-light); box-shadow: inset 0 3px 0 var(--c); transition: opacity .6s var(--ease-io-quad), transform .7s var(--ease-out-circ); transition-delay: calc(.35s + var(--i) * .22s); } .ap-st__card h3 { font: 700 17px/1.3 var(--f-title); letter-spacing: -.2px; } main .ap-st__card p { margin-top: 8px; padding-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--muted); text-align: left; background: var(--h-dash) left top / 100% 1px no-repeat; } .js-reveal .ap-st:not(.is-in) .ap-st__ico { opacity: 0; transform: scale(.5); } .js-reveal .ap-st:not(.is-in) .ap-st__card { opacity: 0; transform: translateY(14px); } @media (min-width: 1100px) { .ap-st { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .ap-st::before, .ap-st::after { left: 10%; right: 10%; top: 31px; bottom: auto; width: auto; height: 3px; } .ap-st::before { background: var(--h-dash); } .ap-st::after { background: linear-gradient(90deg, #3d8bff, #1ba2d6 50%, #00bf63); transform-origin: left; } .js-reveal .ap-st:not(.is-in)::after { transform: scaleX(0); } .ap-st li { grid-template-columns: 1fr; grid-template-rows: auto 1fr; row-gap: 18px; } .ap-st__node { justify-self: center; } .ap-st__card { height: 100%; } } /* --- Planejamento: frase de fechamento --- */ main .ap-qt { margin-top: 16px; padding: 22px 26px; font: 500 18px/1.45 var(--f-title); color: #fff; text-align: center; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .12); } /* --- Painel: textos + notebook com o painel interativo --- */ .ap-pn { display: grid; gap: 40px; } .ap-pn__t .sec__head { margin-bottom: 0; } .ap-pn__l { list-style: none; display: grid; gap: 4px; margin-top: 28px; } .ap-pn__l li { padding: 18px 20px; background: #fff; box-shadow: inset 3px 0 0 var(--blue); } .ap-pn__l b { display: block; font: 700 16px/1.3 var(--f-title); } .ap-pn__l span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--muted); } @media (min-width: 1000px) { .ap-pn { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; } } /* Painel (760px de largura, escalado para caber na tela do notebook em js/ap.js) */ .ap-pb { --fg: #07142b; color: var(--navy); background: #fff; font-size: 13px; } .ap-pb__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; color: #fff; background: var(--navy); } .ap-pb__top b { display: block; font: 700 16px/1.3 var(--f-title); } .ap-pb__top span { font-size: 12px; color: #9fb2cc; } .ap-pb__clr { padding: 7px 12px; border: 0; cursor: pointer; font: 700 13px/1 var(--f-title); color: #fff; background: rgba(255, 255, 255, .12); } .ap-pb__clr:hover { background: rgba(255, 255, 255, .22); } .ap-pb__f { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 14px 20px; background: #f7f9fc; box-shadow: inset 0 -1px 0 #eef1f6; } .ap-pb__f > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ap-pb__f > div > span { font: 700 11px/1 var(--f-label); letter-spacing: 1.3px; text-transform: uppercase; color: #8a99ae; } .ap-pb__ch { display: flex; flex-wrap: wrap; gap: 6px; } .ap-pb__ch button { padding: 6px 12px; border: 0; cursor: pointer; font: 700 13px/1 var(--f-title); color: #4a5a72; background: #fff; box-shadow: inset 0 0 0 1px #dbe2ec; transition: background .15s, color .15s, box-shadow .15s; } .ap-pb__ch button:hover { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .ap-pb__ch button[aria-pressed="true"] { color: #fff; background: var(--blue); box-shadow: none; } .ap-pb__k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 4px; } .ap-pb__k > div { padding: 12px 14px; box-shadow: inset 4px 0 0 var(--k), inset 0 0 0 1px #e6ebf2; } .ap-pb__k .is-p { --k: var(--ap-p); } .ap-pb__k .is-c { --k: var(--ap-c); } .ap-pb__k .is-n { --k: var(--ap-n); } .ap-pb__k .is-o { --k: var(--navy); } .ap-pb__k span { display: block; font: 700 11px/1.2 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: #8a99ae; } .ap-pb__k b { display: block; font: 800 28px/1.15 var(--f-title); letter-spacing: -.5px; } .ap-pb__k small { font-size: 12px; color: #6b7a90; } .ap-pb__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 20px 8px; } .ap-pb__c { min-width: 0; padding: 14px 16px; box-shadow: inset 0 0 0 1px #e6ebf2; } .ap-pb__c h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 700 14.5px/1.3 var(--f-title); } .ap-pb__c h4 small { font: 600 11px/1.2 var(--f-label); color: #8a99ae; } .ap-pb__bars { display: grid; gap: 6px; } .ap-pb__bar { display: grid; grid-template-columns: 82px minmax(0, 1fr) 40px; gap: 10px; align-items: center; margin: 0 -6px; padding: 4px 6px; border: 0; cursor: pointer; font: inherit; text-align: left; color: inherit; background: none; transition: background .15s, opacity .15s; } .ap-pb__bar:hover { background: #f3f7fc; } .ap-pb__bar span { font: 700 13px/1.2 var(--f-title); } .ap-pb__bar b { font: 700 13px/1 var(--f-title); text-align: right; } .ap-pb__bars.is-flt .ap-pb__bar { opacity: .4; } .ap-pb__bars.is-flt .ap-pb__bar.is-on { opacity: 1; background: #eaf2ff; } .ap-stk { display: flex; gap: 2px; height: 14px; overflow: hidden; } .ap-stk i { display: block; height: 100%; transition: flex-grow .45s var(--ease-out-circ); } .ap-stk .is-p, .ap-pb__cs .is-p { background: var(--ap-p); } .ap-stk .is-c, .ap-pb__cs .is-c { background: var(--ap-c); } .ap-stk .is-n, .ap-pb__cs .is-n { background: var(--ap-n); } .ap-pb__ln { position: relative; } .ap-pb__ln svg { display: block; width: 100%; height: auto; overflow: visible; } .ap-pb__ln .gr line { stroke: #eef1f6; } .ap-pb__ln text { font: 500 11px var(--f-label); fill: #8a99ae; } .ap-pb__ln .ln { fill: none; stroke: var(--ap-p); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .ap-pb__ln .ar { fill: rgba(10, 163, 85, .1); } .ap-pb__ln .dt { fill: var(--ap-p); stroke: #fff; stroke-width: 2; } .ap-pb__ln .lu { fill: #f3f5f8; } .ap-pb__ln .lut { font-size: 10.5px; font-weight: 700; } .ap-pb__ln .hz { fill: transparent; cursor: crosshair; } .ap-pb__ln .xh { stroke: var(--navy); stroke-opacity: .2; } .ap-pb__tt { position: absolute; padding: 6px 10px; font-size: 12px; line-height: 1.4; white-space: nowrap; color: #fff; background: var(--navy); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity .12s; } .ap-pb__tt.is-on { opacity: 1; } .ap-pb__tt b { display: block; font-size: 11px; color: #9fb2cc; } .ap-pb__cs { display: grid; gap: 7px; } .ap-pb__cs > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; color: #3d4c63; } .ap-pb__cs .cb { display: block; height: 10px; overflow: hidden; background: #f0f3f7; } .ap-pb__cs .cb i { display: block; height: 100%; transition: width .45s var(--ease-out-circ); } .ap-pb__cs b, .ap-pb__os b { font: 700 13px/1 var(--f-title); text-align: right; } .ap-pb__os { display: grid; gap: 8px; } .ap-pb__os > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: #f7f9fc; box-shadow: inset 0 0 0 1px #eef1f6; } .ap-pb__os code { padding: 2px 6px; font: 700 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #4a5a72; background: #eef2f7; } .ap-pb__os span { overflow: hidden; font-size: 13px; color: #3d4c63; white-space: nowrap; text-overflow: ellipsis; } .ap-pb__os b { color: #c93a3e; } .ap-pb__emp { padding: 10px 0; font-size: 13px; color: #8a99ae; } .ap-pb__lg { margin: 0; padding: 6px 20px 16px; color: #6b7a90; } .ap-nb .gpr-nb__view { background: #fff; } /* celular: painel desenhado com 440px (js/ap.js), indicadores 2 x 2 e gráficos em uma coluna */ .ap-nb.is-narrow .ap-pb__k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-nb.is-narrow .ap-pb__g { grid-template-columns: 1fr; } .ap-nb.is-narrow .ap-pb__top, .ap-nb.is-narrow .ap-pb__f, .ap-nb.is-narrow .ap-pb__k, .ap-nb.is-narrow .ap-pb__g, .ap-nb.is-narrow .ap-pb__lg { padding-left: 14px; padding-right: 14px; } /* ================================================================= TREINAMENTO ONLINE (2026-10-27): página de venda do curso Microsoft Power BI Aplicado à Manutenção, adaptada ao visual do site. Prefixo .to-; reaproveita o notebook .gpr-nb (Paradas), .faq-list e .cta-band. Interações em js/to.js. ================================================================= */ /* --- Topo: texto à esquerda, curso nos tablets com selos flutuando à direita --- */ .to-hero .to-hero__grid { display: grid; gap: 48px; } .to-hero .to-hero__grid > div:first-child { max-width: none; } .to-hero__title.page-hero__title { font-size: clamp(38px, 3.9vw, 62px); line-height: 1.04; } .to-hero__art { position: relative; max-width: 560px; margin: 0 auto; } .to-hero__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); } .to-hero__chips { list-style: none; } .to-hero__chips li { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; font: 700 14px/1 var(--f-title); color: #fff; background: rgba(10, 24, 48, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .28), 0 14px 30px rgba(0, 0, 0, .35); animation: to-float 6s var(--ease-io-quad) infinite; animation-delay: calc(var(--i) * -2s); } .to-hero__chips li:nth-child(1) { left: -4%; top: 14%; } .to-hero__chips li:nth-child(2) { right: -2%; top: 46%; } .to-hero__chips li:nth-child(3) { left: 8%; bottom: 6%; } .to-hero__chips svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @keyframes to-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .to-hero__chips li { animation: none; } } @media (min-width: 1000px) { .to-hero.page-hero--mesh { align-items: center; min-height: min(760px, 86vh); padding-bottom: 72px; } .to-hero .to-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 56px; } } @media (max-width: 999px) { .to-hero__art { max-width: 440px; } .to-hero__chips li { padding: 9px 12px; font-size: 12.5px; } } /* --- Prova social (topo) e estrelas --- */ .to-stars { color: #f5b301; letter-spacing: 1px; } .to-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; padding-top: 22px; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .22) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .to-proof li { display: grid; gap: 4px; } .to-proof b { display: flex; align-items: center; gap: 8px; font: 800 26px/1 var(--f-title); letter-spacing: -.5px; color: #fff; } .to-proof b .to-stars { font-size: 14px; } .to-proof li > span { font-size: 13px; line-height: 1.3; color: rgba(243, 243, 243, .7); } /* --- Faixa de logos logo abaixo do topo --- */ .to-logos { background: var(--bg-light); } main .to-logos__t { margin: 0 0 4px; font: 700 12px/1.3 var(--f-label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); text-align: center; } /* --- O desafio: texto + chamada / colagem de fotos com cartões flutuando --- */ .to-ds { display: grid; gap: 48px; align-items: center; } .to-ds .sec__head { margin-bottom: 0; } .to-ds__q.sec__title { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; } main .to-ds__big { margin-top: 28px; font: 700 clamp(20px, 1.9vw, 26px)/1.3 var(--f-title); letter-spacing: -.3px; text-align: left; } main .to-ds__txt { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--muted); text-align: left; } .to-ds__txt b { color: var(--fg); } .to-ds mark { padding: 0 .1em; color: inherit; background: linear-gradient(transparent 60%, rgba(14, 118, 255, .28) 60%); } .to-ds .page-hero__ctas { margin-top: 28px; } .to-ds__art { position: relative; height: clamp(380px, 40vw, 540px); } .to-ds__ph { position: absolute; margin: 0; overflow: hidden; background: #0b1020; box-shadow: 0 30px 60px rgba(7, 20, 43, .22); } .to-ds__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-circ); } .to-ds__ph:hover img { transform: scale(1.05); } .to-ds__ph--a { left: 0; top: 0; width: 74%; height: 72%; } .to-ds__ph--b { right: 0; bottom: 0; width: 42%; height: 62%; box-shadow: 0 0 0 8px #fff, 0 30px 60px rgba(7, 20, 43, .28); } .to-ds__card { position: absolute; z-index: 1; display: grid; gap: 2px; min-width: 170px; padding: 14px 16px; background: #fff; box-shadow: inset 3px 0 0 var(--blue), 0 18px 40px rgba(7, 20, 43, .18); animation: to-float 6s var(--ease-io-quad) infinite; } .to-ds__card b { font: 800 22px/1.1 var(--f-title); letter-spacing: -.3px; } .to-ds__card small { font-size: 12.5px; line-height: 1.3; color: var(--muted); } .to-ds__card .to-stars { font-size: 13px; } .to-ds__card svg { width: 26px; height: 26px; margin-bottom: 4px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .to-ds__card--a { left: 4%; bottom: 6%; animation-delay: -1s; } .to-ds__card--b { right: 30%; top: 6%; box-shadow: inset 3px 0 0 #00bf63, 0 18px 40px rgba(7, 20, 43, .18); animation-delay: -3s; } .to-ds__card--b b { font-size: 16px; } .to-ds__card--c { right: -2%; top: 24%; animation-delay: -4.5s; } .to-ds__card--c b { font-size: 16px; } .to-ds__bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-bottom: 4px; } .to-ds__bars i { display: block; width: 7px; background: linear-gradient(#3d8bff, #004aad); } .to-ds__bars i:nth-child(1) { height: 40%; } .to-ds__bars i:nth-child(2) { height: 65%; } .to-ds__bars i:nth-child(3) { height: 50%; } .to-ds__bars i:nth-child(4) { height: 100%; } @media (prefers-reduced-motion: reduce) { .to-ds__card { animation: none; } } @media (min-width: 1000px) { .to-ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } } @media (max-width: 599px) { .to-ds__art { height: 380px; } .to-ds__card { min-width: 0; padding: 10px 12px; } .to-ds__card b { font-size: 18px; } .to-ds__card--b, .to-ds__card--c { display: none; } } /* --- Diferenciais: seis cartões com ícone --- */ .to-dif { list-style: none; display: grid; gap: 12px; counter-reset: dif; } .to-dif li { position: relative; padding: 28px 24px 26px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); counter-increment: dif; transition: background .3s, box-shadow .3s, transform .5s var(--ease-out-circ); } .to-dif li::after { content: counter(dif, decimal-leading-zero); position: absolute; right: 22px; top: 24px; font: 700 13px/1 var(--f-label); letter-spacing: 1px; color: rgba(243, 243, 243, .35); } .to-dif li:hover { transform: translateY(-4px); background: rgba(14, 118, 255, .1); box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .35), 0 20px 40px rgba(0, 0, 0, .35); } .to-dif__ico { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: linear-gradient(135deg, #3d8bff, #004aad); box-shadow: 0 10px 24px rgba(14, 118, 255, .35); } .to-dif__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .to-dif h3 { margin-top: 22px; font: 700 19px/1.25 var(--f-title); letter-spacing: -.2px; color: #fff; } main .to-dif p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(243, 243, 243, .72); text-align: left; } @media (min-width: 700px) { .to-dif { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .to-dif { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } /* --- Conteúdo: lista numerada + notebook com o painel --- */ .to-cv { display: grid; gap: 44px; } .to-cv .sec__head { margin-bottom: 0; } .to-cv__l { list-style: none; counter-reset: cv; display: grid; gap: 4px; margin-top: 28px; } .to-cv__l li { position: relative; counter-increment: cv; padding: 16px 18px 16px 62px; font-size: 15.5px; line-height: 1.45; background: #fff; box-shadow: inset 3px 0 0 var(--blue); } .to-cv__l li::before { content: counter(cv, decimal-leading-zero); position: absolute; left: 18px; top: 15px; display: grid; place-items: center; width: 30px; height: 30px; font: 700 12.5px/1 var(--f-title); color: var(--blue); background: rgba(14, 118, 255, .1); } .to-cv__l b { font-family: var(--f-title); } main .to-cv__more { margin-top: 14px; font: 700 18px/1.3 var(--f-title); color: var(--logo-blue); text-align: left; } @media (min-width: 1000px) { .to-cv { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; } } /* Painel de manutenção (760px de largura, escalado em js/to.js) */ .to-pb { --pv: #0e76ff; --pd: #00bf63; --co: #e5484d; color: var(--navy); background: #fff; font-size: 13px; } .to-pb__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; color: #fff; background: var(--navy); } .to-pb__top b { display: block; font: 700 16px/1.3 var(--f-title); } .to-pb__top span { font-size: 12px; color: #9fb2cc; } .to-pb__pbi { display: flex; align-items: flex-end; gap: 3px; height: 22px; } .to-pb__pbi i { display: block; width: 6px; background: #f2c811; } .to-pb__pbi i:nth-child(1) { height: 45%; opacity: .7; } .to-pb__pbi i:nth-child(2) { height: 75%; opacity: .85; } .to-pb__pbi i:nth-child(3) { height: 100%; } .to-pb__f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; background: #f7f9fc; box-shadow: inset 0 -1px 0 #eef1f6; } .to-pb__f > span { font: 700 11px/1 var(--f-label); letter-spacing: 1.3px; text-transform: uppercase; color: #8a99ae; } .to-pb__ch { display: flex; flex-wrap: wrap; gap: 6px; } .to-pb__ch button { padding: 6px 12px; border: 0; cursor: pointer; font: 700 13px/1 var(--f-title); color: #4a5a72; background: #fff; box-shadow: inset 0 0 0 1px #dbe2ec; transition: background .15s, color .15s, box-shadow .15s; } .to-pb__ch button:hover { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .to-pb__ch button[aria-pressed="true"] { color: #fff; background: var(--blue); box-shadow: none; } .to-pb__k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 20px 4px; } .to-pb__k > div { padding: 12px 14px; box-shadow: inset 4px 0 0 #f5a524, inset 0 0 0 1px #e6ebf2; } .to-pb__k > div.is-ok { box-shadow: inset 4px 0 0 #00bf63, inset 0 0 0 1px #e6ebf2; } .to-pb__k span { display: block; font: 700 10.5px/1.25 var(--f-label); letter-spacing: .8px; text-transform: uppercase; color: #8a99ae; } .to-pb__k b { display: block; margin-top: 4px; font: 800 26px/1.1 var(--f-title); letter-spacing: -.5px; } .to-pb__k small { font-size: 11.5px; color: #6b7a90; } .to-pb__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 20px 18px; } .to-pb__c { min-width: 0; padding: 14px 16px; box-shadow: inset 0 0 0 1px #e6ebf2; } .to-pb__c--w { grid-column: 1 / -1; } .to-pb__c h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 700 14px/1.3 var(--f-title); } .to-pb__c h4 small { font: 600 11px/1.2 var(--f-label); color: #8a99ae; } .to-pb__ln { display: block; width: 100%; height: auto; overflow: visible; } .to-pb__ln .gr line { stroke: #eef1f6; } .to-pb__ln text { font: 500 11px var(--f-label); fill: #8a99ae; } .to-pb__ln .mt { stroke: #00bf63; stroke-width: 1.5; stroke-dasharray: 5 4; } .to-pb__ln .ar { fill: rgba(14, 118, 255, .09); } .to-pb__ln .ln { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-io-quad) .3s; } .to-pb__ln .dt { fill: #fff; stroke: #f5a524; stroke-width: 2; } .to-pb__ln .dt.is-ok { stroke: var(--blue); } .js-reveal .to-nb:not(.is-in) .to-pb__ln .ln { stroke-dashoffset: 100; } .to-pb__bars { display: grid; gap: 9px; } .to-pb__bars > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; gap: 10px; align-items: center; } .to-pb__bars span { overflow: hidden; font: 600 12.5px/1.2 var(--f-title); white-space: nowrap; text-overflow: ellipsis; } .to-pb__bars i { display: block; height: 12px; background: #f0f3f7; } .to-pb__bars em { display: block; height: 100%; background: linear-gradient(90deg, #004aad, #0e76ff); transition: width .7s var(--ease-out-circ); } .js-reveal .to-nb:not(.is-in) .to-pb__bars em { width: 0 !important; } .to-pb__bars b { font: 700 12.5px/1 var(--f-title); text-align: right; } .to-pb__stk { display: flex; gap: 2px; height: 22px; overflow: hidden; } .to-pb__stk i { display: block; height: 100%; transition: flex-grow .6s var(--ease-out-circ); } .to-pb__mix ul { list-style: none; display: grid; gap: 9px; margin-top: 14px; } .to-pb__mix li { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.2 var(--f-title); } .to-pb__mix li b { margin-left: auto; } .to-pb__mix li i { display: block; width: 11px; height: 11px; } .to-pb .is-pv { background: var(--pv); } .to-pb .is-pd { background: var(--pd); } .to-pb .is-co { background: var(--co); } .to-nb .gpr-nb__view { background: #fff; } .to-nb.is-narrow .to-pb__k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .to-nb.is-narrow .to-pb__g { grid-template-columns: 1fr; } .to-nb.is-narrow .to-pb__top, .to-nb.is-narrow .to-pb__f, .to-nb.is-narrow .to-pb__k, .to-nb.is-narrow .to-pb__g { padding-left: 14px; padding-right: 14px; } /* --- Academia Planning: duas faixas contínuas de fotos (param ao passar o mouse) --- */ .to-mq { display: grid; gap: 12px; margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .to-mq__row { list-style: none; display: flex; gap: 12px; width: max-content; animation: to-mq 60s linear infinite; } .to-mq__row--rev { animation-direction: reverse; animation-duration: 70s; } .to-mq:hover .to-mq__row { animation-play-state: paused; } .to-mq li { position: relative; flex: none; width: clamp(240px, 24vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; background: #0b1020; } .to-mq img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out-circ); } .to-mq li:hover img { transform: scale(1.06); } .to-mq li span { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 12px; font: 700 13px/1.25 var(--f-title); color: #fff; background: linear-gradient(transparent, rgba(7, 20, 43, .88)); } @keyframes to-mq { to { transform: translateX(calc(-50% - 6px)); } } @media (prefers-reduced-motion: reduce) { .to-mq { overflow-x: auto; } .to-mq__row { animation: none; } } /* --- Nosso jeito de fazer: três pilares --- */ .to-pil { list-style: none; display: grid; gap: 12px; } .to-pil li { position: relative; padding: 30px 26px 28px; overflow: hidden; background: #fff; box-shadow: inset 0 4px 0 var(--c); transition: transform .5s var(--ease-out-circ), box-shadow .3s; } .to-pil li:hover { transform: translateY(-4px); box-shadow: inset 0 4px 0 var(--c), 0 20px 40px rgba(7, 20, 43, .08); } .to-pil__n { position: absolute; right: 18px; top: 8px; font: 800 64px/1 var(--f-title); letter-spacing: -2px; color: color-mix(in srgb, var(--c) 12%, transparent); } .to-pil__ico { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: var(--c); } .to-pil__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .to-pil h3 { margin-top: 22px; font: 700 20px/1.25 var(--f-title); letter-spacing: -.3px; } main .to-pil p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); text-align: left; } @media (min-width: 1000px) { .to-pil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } /* --- Acesso vitalício e preço --- */ .to-buy__g { display: grid; gap: 16px; } .to-buy__inc { display: grid; gap: 24px; align-items: center; padding: 28px; background: rgba(238, 238, 240, .05); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .1); } .to-buy__img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); } .to-buy__l { list-style: none; display: grid; } .to-buy__l li { display: flex; align-items: center; gap: 14px; padding: 12px 0; font: 600 16px/1.35 var(--f-title); color: #fff; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .16) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .to-buy__l li:first-child { background: none; } .to-buy__l svg { flex: none; width: 34px; height: 34px; padding: 7px; fill: none; stroke: var(--blue-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: rgba(14, 118, 255, .14); } .to-price { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 36px 32px; overflow: hidden; color: var(--navy); background: #fff; box-shadow: inset 0 4px 0 var(--blue); } .to-price::after { content: ""; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(14, 118, 255, .14), transparent 70%); pointer-events: none; } .to-price__lbl { font: 700 12px/1.4 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); } main .to-price__v { display: flex; align-items: flex-start; gap: 6px; margin-top: 18px; text-align: left; } .to-price__v small { margin-top: .5em; font: 700 22px/1 var(--f-title); } .to-price__v b { font: 800 clamp(56px, 6vw, 84px)/.9 var(--f-title); letter-spacing: -3px; } main .to-price__p { margin-top: 10px; font: 600 18px/1.3 var(--f-title); color: #4a5a72; text-align: left; } main .to-price__cta { margin-top: 24px; font-size: 15px; color: #4a5a72; text-align: left; } .to-price__btn { align-self: flex-start; margin-top: 14px; } .to-price__ok { list-style: none; display: grid; gap: 8px; margin-top: 24px; padding-top: 18px; background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .18) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .to-price__ok li { position: relative; padding-left: 26px; font-size: 14.5px; color: #4a5a72; } .to-price__ok li::before { content: "✓"; position: absolute; left: 2px; top: 0; font: 800 14.5px/1.45 var(--f-title); color: #00a355; } @media (min-width: 700px) { .to-buy__inc { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } } @media (min-width: 1100px) { .to-buy__g { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } } /* --- Garantia: selo de 7 dias + texto --- */ .to-gar { display: grid; gap: 40px; align-items: center; } .to-gar .sec__head { margin-bottom: 0; } .to-gar__seal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(280px, 70vw); margin: 0 auto; padding-bottom: 28px; aspect-ratio: 200 / 220; text-align: center; filter: drop-shadow(0 24px 40px rgba(7, 20, 43, .25)); } .to-gar__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; } .to-gar__sh { fill: #0a1830; } .to-gar__in { fill: none; stroke: var(--blue-soft); stroke-width: 2; stroke-dasharray: 5 5; } .to-gar__seal b, .to-gar__seal span { position: relative; } .to-gar__seal b { font: 800 112px/.9 var(--f-title); letter-spacing: -4px; color: transparent; background: linear-gradient(180deg, #fff, #99c5ff); -webkit-background-clip: text; background-clip: text; } .to-gar__seal span { margin-top: 6px; font: 700 13px/1.2 var(--f-label); letter-spacing: 1.6px; text-transform: uppercase; color: #fff; } .js-reveal .to-gar__seal.reveal:not(.is-in) { opacity: 0; transform: scale(.85) rotate(-6deg); } .to-gar__l { list-style: none; display: grid; gap: 4px; margin-top: 28px; } .to-gar__l li { padding: 16px 20px; background: var(--bg-light); box-shadow: inset 3px 0 0 #00bf63; } .to-gar__l b { display: block; font: 700 16px/1.3 var(--f-title); } .to-gar__l span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--muted); } @media (min-width: 900px) { .to-gar { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; } } /* --- Treinamento online, 2ª versão (mais cara de landing page) --- */ .to-cv__cta { margin-top: 22px; } /* números da Academia acima das faixas de fotos */ .to-stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .to-stats li { display: grid; gap: 6px; padding: 22px 22px 20px; background: var(--bg-light); box-shadow: inset 0 3px 0 var(--blue); } .to-stats b { font: 800 clamp(34px, 3.4vw, 48px)/1 var(--f-title); letter-spacing: -1.5px; color: var(--logo-blue); } .to-stats li > span { font-size: 14px; line-height: 1.4; color: var(--muted); } @media (min-width: 900px) { .to-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* pilares com foto no topo */ .to-pil li { padding-top: 0; } .to-pil__ph { margin: 0 -26px 24px; height: 190px; overflow: hidden; background: #0b1020; } .to-pil__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-circ); } .to-pil li:hover .to-pil__ph img { transform: scale(1.06); } .to-pil li { box-shadow: inset 0 -4px 0 var(--c); } .to-pil li:hover { box-shadow: inset 0 -4px 0 var(--c), 0 20px 40px rgba(7, 20, 43, .08); } .to-pil__ico { position: relative; margin-top: -50px; box-shadow: 0 0 0 6px #fff; } .to-pil__n { top: 204px; } /* bandeiras de pagamento */ .to-price__cards { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 18px; } /* barra fixa de compra */ .to-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; color: #fff; background: rgba(7, 20, 43, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 rgba(153, 197, 255, .2), 0 -16px 40px rgba(0, 0, 0, .3); transform: translateY(110%); transition: transform .5s var(--ease-out-circ); } .to-bar.is-on { transform: none; } .to-bar__in { display: flex; align-items: center; gap: 18px; padding-block: 12px; } .to-bar img { flex: none; width: 54px; height: auto; } .to-bar p { display: grid; gap: 2px; margin: 0; } .to-bar p b { font: 700 15px/1.25 var(--f-title); } .to-bar p span { font-size: 12.5px; color: rgba(243, 243, 243, .7); } .to-bar__pr { margin-left: auto !important; text-align: right; } .to-bar__pr b { font-size: 20px !important; } @media (max-width: 799px) { .to-bar img, .to-bar p:not(.to-bar__pr) { display: none; } .to-bar__pr { margin-left: 0 !important; text-align: left; } .to-bar .btn { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { .to-bar { transition: none; } } /* botões de compra no azul de destaque (mesmo padrão do .btn--cta do rodapé) */ .to-price .btn, .to-bar .btn { --btn-bg: var(--blue); --btn-fg: #fff; --icon-bg: var(--logo-blue); --icon-fg: #fff; filter: drop-shadow(0 10px 28px rgba(14, 118, 255, .4)); } .to-price .btn .btn__label, .to-bar .btn .btn__label { font-weight: 700; } .to-price .btn:hover .btn__icon, .to-bar .btn:hover .btn__icon { --icon-bg: #00327a; } .to-price .btn { height: 56px; font-size: 17px; } .to-price .btn .btn__label, .to-price .btn .btn__label > span, .to-price .btn .btn__icon, .to-price .btn .btn__icon > span { height: 56px; } .to-price .btn .btn__label { padding: 0 28px; } .to-price .btn .btn__icon, .to-price .btn .btn__icon > span { width: 56px; } /* --- Chamada para o treinamento online na página treinamentos.html (2026-10-27) --- */ .tol { position: relative; display: grid; gap: 32px; align-items: center; padding: 40px 32px; overflow: hidden; color: #fff; background: linear-gradient(150deg, #0a1830 0%, #0b2b66 60%, #0e4fbf 120%); box-shadow: 0 30px 60px rgba(7, 20, 43, .18); } .tol::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 40%, #000 15%, transparent 70%); } .tol > * { position: relative; } .tol__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .tol__tags li { padding: 7px 12px; font: 700 12px/1 var(--f-label); letter-spacing: .6px; text-transform: uppercase; color: var(--blue-soft); background: rgba(14, 118, 255, .14); box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .28); } .tol__title { margin-top: 22px; font: 800 clamp(28px, 3vw, 44px)/1.08 var(--f-title); letter-spacing: -1px; } main .tol__txt { margin-top: 14px; max-width: 56ch; font-size: 17px; line-height: 1.55; color: rgba(243, 243, 243, .8); text-align: left; } .tol__meta { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 24px; padding-top: 22px; background: repeating-linear-gradient(90deg, rgba(243, 243, 243, .22) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } main .tol__rate, main .tol__price { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; margin: 0; text-align: left; } .tol__rate .to-stars { grid-column: 1 / -1; font-size: 14px; } .tol__rate b, .tol__price b { font: 800 34px/1 var(--f-title); letter-spacing: -1px; } .tol__rate > span:last-child { max-width: 16ch; font-size: 13px; line-height: 1.3; color: rgba(243, 243, 243, .7); } .tol__price { grid-template-columns: auto auto !important; } .tol__price small { font: 700 16px/1 var(--f-title); align-self: start; margin-top: 4px; } .tol__price > span { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; color: rgba(243, 243, 243, .7); } .tol .page-hero__ctas { margin-top: 28px; } .tol__btn { --btn-bg: var(--blue); --btn-fg: #fff; --icon-bg: var(--logo-blue); --icon-fg: #fff; filter: drop-shadow(0 10px 28px rgba(14, 118, 255, .45)); } .tol__btn .btn__label { font-weight: 700; } .tol__btn:hover .btn__icon { --icon-bg: #00327a; } .tol__art { position: relative; margin: 0 auto; max-width: 460px; } .tol__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)); transition: transform 1s var(--ease-out-circ); } .tol:hover .tol__art img { transform: translateY(-6px) rotate(-1deg); } .tol__chip { position: absolute; left: 0; bottom: 8%; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; font: 700 14px/1 var(--f-title); color: var(--navy); background: #fff; box-shadow: inset 3px 0 0 var(--blue), 0 18px 40px rgba(0, 0, 0, .3); animation: to-float 6s var(--ease-io-quad) infinite; } .tol__chip svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { .tol__chip { animation: none; } } @media (min-width: 1000px) { .tol { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; padding: 56px 56px; } } .course__online { margin-top: 10px; } .course__online a { font: 700 15px/1.4 var(--f-title); color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } /* --- Grade de treinamentos visual (treinamentos.html, 2026-10-27): os 14 cursos à vista, filtros por trilha e ementa numa janela (js/cursos.js). Prefixo .cg- --- */ .cg__f { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .cg__f button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; cursor: pointer; font: 700 14px/1 var(--f-title); color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .12); } .cg__f button i { width: 10px; height: 10px; background: var(--c); } .cg__f button b { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; font-size: 12px; color: var(--muted); background: rgba(7, 20, 43, .06); } .cg__f button:hover { box-shadow: inset 0 0 0 1px var(--c, var(--blue)); } .cg__f button[aria-pressed="true"] { color: #fff; background: var(--c, var(--navy)); box-shadow: none; } .cg__f button[aria-pressed="true"] i { background: #fff; } .cg__f button[aria-pressed="true"] b { color: #fff; background: rgba(255, 255, 255, .2); } .cg__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; } .cg__item { display: flex; } .cg__item.is-in { animation: cg-in .5s var(--ease-out-circ) both; } @keyframes cg-in { from { opacity: 0; transform: translateY(12px); } } .cg__card { position: relative; display: flex; flex: 1; flex-direction: column; padding: 22px 22px 18px; overflow: hidden; background: #fff; box-shadow: inset 0 4px 0 var(--c); transition: transform .5s var(--ease-out-circ), box-shadow .3s; } .cg__card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); transition: transform .6s var(--ease-out-circ); pointer-events: none; } .cg__card:hover { transform: translateY(-4px); box-shadow: inset 0 4px 0 var(--c), 0 20px 40px rgba(7, 20, 43, .1); } .cg__card:hover::after { transform: scale(1.4); } .cg__top { display: flex; justify-content: space-between; align-items: flex-start; } .cg__ico { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 35%, transparent); } .cg__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cg__n { font: 800 32px/1 var(--f-title); letter-spacing: -1px; color: color-mix(in srgb, var(--c) 22%, transparent); } .cg__tag { display: block; margin-top: 18px; font: 700 11px/1.3 var(--f-label); letter-spacing: 1.1px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, #000); } .cg__title { margin-top: 6px; font: 700 17.5px/1.3 var(--f-title); letter-spacing: -.2px; } .cg__badge { align-self: flex-start; margin-top: 10px; padding: 5px 9px; font: 700 11px/1 var(--f-label); letter-spacing: .6px; text-transform: uppercase; color: #fff; background: var(--blue); } .cg__more { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; gap: 8px; margin-top: auto; padding: 16px 0 0; border: 0; cursor: pointer; font: 700 14px/1 var(--f-title); color: var(--blue); background: none; } .cg__more span { transition: transform .3s var(--ease-out-circ); } .cg__card:hover .cg__more span { transform: translateX(4px); } .cg__title + .cg__more, .cg__badge + .cg__more { margin-top: auto; } .cg__card > .cg__title { margin-bottom: 14px; } /* janela da ementa */ .cg__dlg { width: min(640px, 92vw); max-height: 86vh; padding: 36px 32px 30px; border: 0; color: var(--navy); background: #fff; box-shadow: inset 0 4px 0 var(--blue), 0 40px 80px rgba(0, 0, 0, .35); } .cg__dlg::backdrop { background: rgba(2, 5, 12, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cg__dlg[open] { animation: cg-in .4s var(--ease-out-circ); } .cg__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; cursor: pointer; font: 400 26px/1 var(--f-title); color: var(--navy); background: var(--bg-light); } .cg__x:hover { color: #fff; background: var(--navy); } .cg__body .cg__tag { margin-top: 0; } .cg__dlg-title { margin-top: 8px; padding-right: 40px; font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--f-title); letter-spacing: -.5px; } main .cg__body p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: rgba(7, 20, 43, .75); text-align: left; } .cg__body .course__online { margin-top: 14px; } .cg__ctas { margin-top: 26px; padding-top: 22px; background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .18) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } @media (prefers-reduced-motion: reduce) { .cg__item.is-in, .cg__dlg[open] { animation: none; } } /* --- Turmas realizadas em carrossel (treinamentos.html, 2026-10-27) --- */ .tu-car__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; } main .tu-car__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; text-align: left; } .tu-car__info b { font: 700 17px/1.2 var(--f-title); } .tu-car__info span { font-size: 14px; color: var(--muted); } .tu-car__track.gallery { grid-template-columns: none; grid-auto-columns: minmax(240px, 74%); gap: 8px; } .tu-car__track .gallery__item { scroll-snap-align: start; } @media (min-width: 700px) { .tu-car__track.gallery { grid-auto-columns: calc((100% - 16px) / 3); } } @media (min-width: 1100px) { .tu-car__track.gallery { grid-auto-columns: calc((100% - 24px) / 4); } } .tu-car__prog { position: relative; height: 3px; margin-top: 16px; overflow: hidden; background: rgba(7, 20, 43, .1); } .tu-car__prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--blue); transition: transform .25s linear; } /* --- Segmentos com foto (segmentos.html, 2026-10-27): fotos do cliente otimizadas em Imagens/segmentos/cards/ (WebP 800x438, a partir de "Segmentos Site 2560x1400.zip") --- */ .card--seg { padding: 0 0 22px; gap: 10px; overflow: hidden; } .card--seg .card__media { margin: 0 0 6px; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1020; } .card--seg .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out-circ); } .card--seg:hover .card__media img { transform: scale(1.06); } .card--seg .card__num, .card--seg .card__title { padding-inline: 22px; } .card--seg:hover { box-shadow: inset 0 0 0 1px var(--blue); } /* --- Atuação Nacional (solucoes.html, 2026-10-27): as 67 fotos de Imagens/atuacao/ na faixa de cards .field__marquee do bloco do mapa (#presenca). Card só com a foto; a volta dura mais porque a faixa é ~8x mais longa que a de 8 cards (~65 px/s) --- */ .field__card--foto { padding: 12px; } .field__marquee--67 .field__track { animation-duration: 350s; } /* Fotos inteiras (2026-11-07, pedido: "escritos, pessoas e logomarcas cortados"): 42 das 67 fotos são em pé e o quadro 4:3 com object-fit: cover cortava cabeça/pé. Agora todos os cards têm a MESMA ALTURA e a largura segue o formato de cada foto (width/height no ), sem corte nenhum. Faixa ~19.000px → 290s mantém ~65 px/s. */ .field__card.field__card--foto { width: auto; } .field__card--foto figure { --fh: 200px; height: var(--fh); aspect-ratio: auto; } .field__card--foto img { width: auto; height: 100%; max-width: none; object-fit: contain; } @media (min-width: 800px) { .field__card--foto figure { --fh: 260px; } } .field__marquee--67 .field__track { animation-duration: 290s; } /* setas embaixo da faixa (2026-11-07): mesmo botão das setas da galeria de métodos (.gp-gal__arrow) */ .field__nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; } /* faixa contínua: sem encaixe foto a foto, para deslizar sem trancos */ .tu-car[data-linear] .tu-car__track { scroll-snap-type: none; scroll-behavior: auto; } .tu-car[data-linear] .tu-car__prog i { transition: none; } /* ================================================================= PÁGINA DIAGNÓSTICO DE MANUTENÇÃO (solucoes/diagnostico-de-manutencao.html, 2026-10-27) Componentes do HTML-modelo do cliente no visual do site (cantos retos, Inter Tight, azul = atual, verde = desejado). Interações em js/dm.js. ================================================================= */ /* --- O que avaliamos: MAPA das 9 dimensões (js/dm.js). Anel com as dimensões em sequência, arco colorido por pilar, linha de progresso até a ativa, centro com o nome; ao lado, painel curto com exemplo de resultado. --c = cor do pilar da dimensão ativa (trocada pelo JS). --- */ .dm-map { --c: #2f80ff; display: grid; gap: 28px; align-items: center; } .dm-map__viz { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; } .dm-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dm-map__trk { fill: none; stroke: #dfe6f0; stroke-width: 2; stroke-dasharray: 4 6; } .dm-map__prg { fill: none; stroke: var(--c); stroke-width: 4; transition: stroke-dashoffset .9s var(--ease-out-circ), stroke .4s; } .dm-map__arc { fill: none; stroke-width: 10; stroke-dasharray: 1 1; stroke-dashoffset: 0; } .dm-map__pl { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 700 12px/1 var(--f-label); letter-spacing: 1.3px; text-transform: uppercase; color: var(--c); } .dm-map__pl.is-l { transform: translate(-100%, -50%); } .dm-map__pl.is-r { transform: translate(0, -50%); } .dm-map__pl.is-c { transform: translate(-50%, -100%); } .dm-map__pl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dm-map__node { position: absolute; z-index: 1; width: 46px; height: 46px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 2px var(--c), 0 6px 14px rgba(7, 20, 43, .1); color: var(--c); font: 700 13px/1 var(--f-label); letter-spacing: .5px; transition: transform .35s var(--ease-out-circ), background-color .3s, color .3s; } .dm-map__node:hover { transform: translate(-50%, -50%) scale(1.1); } .dm-map__node.is-done { background: color-mix(in srgb, var(--c) 14%, #fff); } .dm-map__node.is-on { background: var(--c); color: #fff; transform: translate(-50%, -50%) scale(1.22); } .dm-map__node.is-on::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); opacity: 0; animation: dm-pulse 1.8s ease-out infinite; } @keyframes dm-pulse { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } } .dm-map__hub { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; border-radius: 50%; text-align: center; background: radial-gradient(circle at 50% 35%, #fff 0%, #f1f5fb 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .dm-map__hp { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--f-label); letter-spacing: 1.3px; text-transform: uppercase; color: var(--c); transition: color .3s; } .dm-map__hp svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dm-map__hn { font: 800 clamp(40px, 6vw, 64px)/1 var(--f-title); letter-spacing: -.04em; color: var(--c); transition: color .3s; } .dm-map__ht { max-width: 15ch; font: 700 clamp(14px, 1.5vw, 18px)/1.2 var(--f-title); color: var(--black); } .dm-map__hub.is-fx > * { animation: dm-fx .45s var(--ease-io-quad) both; } @keyframes dm-fx { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* painel da dimensão */ .dm-map__card { position: relative; padding: 26px 24px 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 40px rgba(7, 20, 43, .07); } .dm-map__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); transition: background-color .3s; } .dm-map__card.is-fx > * { animation: dm-fx .45s var(--ease-io-quad) both; } .dm-map__card.is-fx > :nth-child(2) { animation-delay: .04s; } .dm-map__card.is-fx > :nth-child(3) { animation-delay: .08s; } .dm-map__card.is-fx > :nth-child(4) { animation-delay: .12s; } .dm-map__card.is-fx > :nth-child(5) { animation-delay: .16s; } .dm-map__card.is-fx > :nth-child(6) { animation-delay: .2s; } .dm-map__tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font: 700 11.5px/1 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; } .dm-map__tag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .dm-map__card h3 { margin: 14px 0 0; font: 700 clamp(20px, 2vw, 24px)/1.2 var(--f-title); letter-spacing: -.3px; } main .dm-map__card p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-align: left; } .dm-map__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; } .dm-map__chips li { padding: 5px 10px; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); font: 600 13px/1.3 var(--f-title); } .dm-map__res { margin-top: 18px; padding: 14px 16px 12px; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .dm-map__rh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .dm-map__rh span { font: 700 11px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(0, 0, 0, .5); } .dm-map__rh em { font: 700 13px/1 var(--f-label); font-style: normal; color: #d93a40; } .dm-map__bar { position: relative; height: 14px; margin-top: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .dm-map__bar i, .dm-map__bar b { position: absolute; top: 0; bottom: 0; } .dm-map__bar .is-a { left: 0; background: linear-gradient(90deg, #6fa8ff, #0e76ff); transform-origin: left; animation: dm-grow .9s var(--ease-out-circ) .15s both; } .dm-map__bar .is-g { background: repeating-linear-gradient(135deg, rgba(10, 163, 85, .28) 0 4px, rgba(10, 163, 85, .1) 4px 8px); transform-origin: left; animation: dm-grow .7s var(--ease-out-circ) .7s both; } .dm-map__bar .is-d { top: -5px; bottom: -5px; width: 4px; margin-left: -2px; background: #0aa355; box-shadow: 0 0 0 2px #fff; animation: dm-fx .4s ease 1.1s both; } @keyframes dm-grow { from { transform: scaleX(0); } } .dm-map__lv { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 6px; } .dm-map__lv span { font-size: 11px; font-weight: 600; text-align: center; color: rgba(0, 0, 0, .45); } .dm-map__vals { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 600 13px/1.2 var(--f-title); } .dm-map__vals span { display: inline-flex; align-items: center; gap: 6px; } .dm-map__vals i { width: 12px; height: 12px; } .dm-map__vals .is-a { background: #0e76ff; } .dm-map__vals .is-d { width: 4px; height: 14px; background: #0aa355; } main .dm-map__card .dm-map__ent { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--black); } .dm-map__ent b { display: block; margin-bottom: 2px; font: 700 11px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(0, 0, 0, .5); } /* navegação: setas + 9 marcadores (o ativo enche enquanto o percurso automático roda) */ .dm-map__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .dm-map__arw { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; cursor: pointer; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); color: var(--black); transition: background-color .2s, color .2s; } .dm-map__arw svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dm-map__arw:hover { background: var(--navy); color: #fff; } .dm-map__dots { display: flex; flex: 1; gap: 4px; } .dm-map__dots button { flex: 1; height: 28px; padding: 0; border: 0; cursor: pointer; background: none; display: grid; align-items: center; } .dm-map__dots i { position: relative; display: block; height: 4px; overflow: hidden; background: color-mix(in srgb, var(--c) 25%, #e6ebf2); transition: height .2s; } .dm-map__dots button:hover i { height: 6px; } .dm-map__dots [aria-selected="true"] i { height: 6px; background: color-mix(in srgb, var(--c) 30%, #fff); } .dm-map__dots [aria-selected="true"] i::after { content: ""; position: absolute; inset: 0; background: var(--c); } .dm-map.is-auto .dm-map__dots [aria-selected="true"] i::after { transform-origin: left; animation: dm-grow 4.5s linear both; } /* entrada: arcos se desenham, nós aparecem em sequência */ .js-reveal .dm-map .dm-map__arc { stroke-dashoffset: 1; } .js-reveal .dm-map.is-in .dm-map__arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out-circ) calc(.2s + var(--k) * .25s); } .js-reveal .dm-map .dm-map__node, .js-reveal .dm-map .dm-map__pl { opacity: 0; } .js-reveal .dm-map.is-in .dm-map__node { opacity: 1; transition: opacity .4s ease calc(.4s + var(--i) * .08s), transform .35s var(--ease-out-circ), background-color .3s, color .3s; } .js-reveal .dm-map.is-in .dm-map__pl { opacity: 1; transition: opacity .5s ease calc(.5s + var(--k) * .25s); } @media (min-width: 1000px) { .dm-map { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; } .dm-map__card { padding: 30px 30px 24px; } } @media (max-width: 620px) { .dm-map__viz { width: 74%; } /* espaço dos lados para os nomes dos pilares */ .dm-map__pl { font-size: 9px; letter-spacing: .6px; } .dm-map__pl svg { display: none; } .dm-map__hub { width: 50%; } .dm-map__node { width: 30px; height: 30px; font-size: 10px; } .dm-map__hub { gap: 3px; } .dm-map__hp { font-size: 9.5px; } .dm-map__ht { font-size: 13px; } } /* lista completa recolhida */ .dm-all { margin-top: 40px; } .dm-all summary { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; list-style: none; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); font: 600 15px/1.2 var(--f-title); transition: background-color .2s, color .2s; } .dm-all summary::-webkit-details-marker { display: none; } .dm-all summary:hover { background: var(--navy); color: #fff; } .dm-all summary span { position: relative; width: 12px; height: 12px; } .dm-all summary span::before, .dm-all summary span::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: currentColor; transition: transform .25s; } .dm-all summary span::after { transform: rotate(90deg); } .dm-all[open] summary span::after { transform: rotate(0); } .dm-all > .dm-px { margin-top: 28px; } /* --- O que avaliamos: as 9 dimensões abertas, uma linha por pilar (Pessoas, Processos, Ativos, Sistemas). Computador: rótulo do pilar à esquerda e até 4 cards à direita; celular: rótulo em cima e cards empilhados. --- */ .dm-px { display: grid; gap: 28px; } .dm-px__row { display: grid; gap: 14px; } .dm-px__h { display: flex; align-items: center; gap: 12px; } .dm-px__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--navy); } .dm-px__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--blue-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dm-px__h h3 { font: 700 22px/1.15 var(--f-title); letter-spacing: -.3px; } .dm-px__n { font: 700 11px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); } .dm-px__cards { display: grid; gap: 12px; } .dm-dc { position: relative; display: flex; flex-direction: column; container-type: inline-size; padding: 22px 20px 18px; scroll-margin-top: calc(var(--header-h) + 24px); background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: box-shadow .25s var(--ease-io-quad), background-color .25s; } .dm-dc::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; background: var(--blue); } .dm-dc:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--blue), 0 16px 32px rgba(7, 20, 43, .08); } .dm-dc.is-hl { animation: dm-hl 1.8s var(--ease-io-quad); } /* destaque ao vir do radar */ @keyframes dm-hl { 0%, 40% { background: #e4efff; box-shadow: inset 0 0 0 2px var(--blue); } } .dm-dc__n { font: 700 13px/1 var(--f-label); letter-spacing: 1.04px; color: var(--blue); } .dm-dc h4 { margin: 10px 0 0; font: 700 18px/1.25 var(--f-title); letter-spacing: -.2px; } main .dm-dc p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); text-align: left; } .dm-dc__s { display: block; margin-top: 16px; font: 700 10.5px/1.3 var(--f-label); letter-spacing: 1.3px; text-transform: uppercase; color: rgba(0, 0, 0, .5); } .dm-dc__c { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .dm-dc__c li { padding: 4px 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); font: 600 13px/1.3 var(--f-title); } .dm-dc__e { margin-top: auto; padding-top: 4px; } .dm-dc__e ul { list-style: none; display: grid; gap: 5px; margin-top: 8px; } .dm-dc__e li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; } .dm-dc__e li::before { content: "✓"; position: absolute; left: 1px; top: 0; font: 800 14px/1.4 var(--f-title); color: #0aa355; } @media (min-width: 700px) { .dm-px__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .dm-px { gap: 0; } .dm-px__row { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .dm-px__row:first-child { padding-top: 0; background: none; } .dm-px__h { flex-direction: column; align-items: flex-start; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); } /* os cards de cada linha dividem a largura toda (2, 4, 1 e 2 por linha) */ .dm-px__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } /* card largo (linhas com 1 ou 2 dimensões): descrição | itens analisados + entregáveis; bem largo (Ativos, 1 card na linha): descrição | itens analisados | entregáveis */ .dm-dc__in { display: flex; flex-direction: column; flex: 1; } .dm-dc__a, .dm-dc__b { display: contents; } @container (min-width: 520px) { .dm-dc__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; } .dm-dc__a, .dm-dc__b { display: flex; flex-direction: column; } .dm-dc__k > .dm-dc__s { margin-top: 0; } } @container (min-width: 900px) { .dm-dc__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr); } .dm-dc__b { display: contents; } .dm-dc__e { margin-top: 0; padding-top: 0; } .dm-dc__e > .dm-dc__s { margin-top: 0; } } /* --- Maturidade: textos + escala + radar --- */ .dm-mx { display: grid; gap: 40px; align-items: center; } .dm-mx__l { list-style: none; display: grid; gap: 14px; margin-top: 28px; } .dm-mx__l li { padding: 2px 0 2px 16px; box-shadow: inset 3px 0 0 var(--blue); } .dm-mx__l b { display: block; font: 700 17px/1.3 var(--f-title); color: #fff; } .dm-mx__l span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: rgba(243, 243, 243, .7); } .dm-lv { margin-top: 28px; } .dm-lv > span { display: block; margin-bottom: 10px; font: 700 11px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(243, 243, 243, .55); } .dm-lv ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .dm-lv li { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgba(243, 243, 243, .78); } .dm-lv li i { display: grid; place-items: center; height: 30px; font: 700 13px/1 var(--f-title); font-style: normal; color: #fff; } .dm-lv li:nth-child(1) i { background: #1b2b4a; } .dm-lv li:nth-child(2) i { background: #163b78; } .dm-lv li:nth-child(3) i { background: #0f4fb0; } .dm-lv li:nth-child(4) i { background: #0a63e0; } .dm-lv li:nth-child(5) i { background: #0aa355; } .dm-rd { position: relative; margin: 0; padding: 20px 22px; background: #fff; color: var(--black); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); } .dm-rd::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; background: var(--blue); } .dm-rd figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .dm-rd figcaption b { font: 700 17px/1.3 var(--f-title); } .dm-rd figcaption span { padding: 4px 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); font: 700 10.5px/1 var(--f-label); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(0, 0, 0, .5); } .dm-rd__tg { display: flex; gap: 6px; margin-top: 12px; } .dm-rd__tg button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; cursor: pointer; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); font: 600 13px/1 var(--f-title); color: var(--black); transition: opacity .2s; } .dm-rd__tg button[aria-pressed="false"] { opacity: .45; } .dm-rd__tg i { display: inline-block; width: 12px; height: 12px; } .dm-rd__tg .is-a { background: var(--blue); } .dm-rd__tg .is-d { box-shadow: inset 0 0 0 2px #0aa355; } .dm-rd__w { position: relative; margin-top: 4px; } .dm-rd__w svg { display: block; width: 100%; height: auto; overflow: visible; } .dm-rd .rg, .dm-rd .ra { fill: none; stroke: #e3e9f1; stroke-width: 1; } .dm-rd .rl { font: 600 12.5px var(--f-title); fill: var(--black); } .dm-rd .rn { font: 600 9.5px var(--f-label); fill: #a3b0c2; } .dm-rd .pd { fill: rgba(10, 163, 85, .08); stroke: #0aa355; stroke-width: 2; stroke-dasharray: 6 5; } .dm-rd .pa { fill: rgba(14, 118, 255, .18); stroke: var(--blue); stroke-width: 2.5; } .dm-rd circle.ca { fill: var(--blue); stroke: #fff; stroke-width: 2; } .dm-rd circle.cd { fill: #fff; stroke: #0aa355; stroke-width: 2; } .dm-rd .rz { fill: transparent; stroke: transparent; cursor: pointer; } .dm-rd__tt { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 8px 11px; background: var(--navy); color: rgba(243, 243, 243, .8); font-size: 12.5px; line-height: 1.45; white-space: nowrap; opacity: 0; transition: opacity .12s; } .dm-rd__tt b { display: block; color: #fff; font-size: 13px; } .dm-rd__tt.is-on { opacity: 1; } .dm-rd__g { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-top: 6px; padding-top: 12px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } .dm-rd__g > span { font: 700 11px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(0, 0, 0, .5); } .dm-rd__g ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .dm-rd__g li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: #fff1f1; font: 600 13px/1.3 var(--f-title); } .dm-rd__g li b { color: #d93a40; } @media (min-width: 1000px) { .dm-mx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } } @media (max-width: 620px) { .dm-rd { padding: 16px; } .dm-rd .rl { font-size: 15px; } .dm-lv li { font-size: 10px; } } /* --- Cronograma (16 semanas): as barras crescem da esquerda, em cascata --- */ .dm-cg { overflow-x: auto; padding: 20px 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 14px 34px rgba(7, 20, 43, .06); } .dm-cg__in { min-width: 880px; } .dm-cg__r { display: grid; grid-template-columns: 270px 1fr; gap: 14px; align-items: center; padding: 7px 8px; margin: 0 -8px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; transition: background-color .15s; } .dm-cg__r:last-child, .dm-cg__hd, .dm-cg__hd2 { background: none; } .dm-cg__r:not(.dm-cg__hd):not(.dm-cg__hd2):not(.dm-cg__ms):hover { background-color: #f6f9fd; } .dm-cg__r > span b { display: block; font: 700 14.5px/1.3 var(--f-title); } .dm-cg__r > span small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--muted); } .dm-cg__w { position: relative; display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; align-items: center; } .dm-cg__w u { grid-row: 1; height: 30px; background: #f2f5f9; text-decoration: none; } .dm-cg__w > i { grid-row: 1; height: 22px; margin: 0 1px; transform-origin: left; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); } .dm-cg__w > i.c1 { background: #9fc3d6; } .dm-cg__w > i.c2 { background: #1f8a8a; } .dm-cg__w > i.c3 { background: #e3a04e; } .dm-cg__w > i.c4 { background: #5b86c5; } .dm-cg__w > i.c5 { background: #8b6cc1; } .js-reveal .dm-cg .dm-cg__w > i { transform: scaleX(0); } .js-reveal .dm-cg.is-in .dm-cg__w > i { transform: none; transition: transform .9s var(--ease-out-circ) calc(.25s + var(--r) * .14s); } .dm-cg__hd, .dm-cg__hd2 { padding-block: 2px; } .dm-cg__hd em { padding: 5px 0; background: var(--navy); color: #fff; font: 700 12px/1.3 var(--f-label); font-style: normal; text-align: center; } .dm-cg__hd em:nth-child(odd) { background: #13284b; } .dm-cg__hd2 em { font: 700 11.5px/1.3 var(--f-label); font-style: normal; text-align: center; color: rgba(0, 0, 0, .45); } .dm-cg__hd2 > span, .dm-cg__ms > span { font: 700 11px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(0, 0, 0, .5); } .dm-cg__ms em { display: flex; justify-content: center; font-style: normal; } .dm-cg__ms i, .dm-cg-m i { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 5px; font: 700 11.5px/1 var(--f-label); font-style: normal; color: #fff; } .dm-cg__ms .is-g, .dm-cg-m .is-g { background: #d93a40; } .dm-cg__ms .is-s, .dm-cg-m .is-s { background: #8b6cc1; } .dm-cg-m { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; font-size: 14px; color: var(--muted); } .dm-cg-m span { display: inline-flex; align-items: center; gap: 8px; } .dm-cg-m em { font-size: 13px; color: rgba(0, 0, 0, .45); } @media (min-width: 1000px) { .dm-cg-m em { margin-left: auto; } } @media (max-width: 620px) { .dm-cg { padding: 16px; } .dm-cg__in { min-width: 620px; } .dm-cg__r { grid-template-columns: 140px 1fr; gap: 10px; } .dm-cg__r > span small { display: none; } } /* --- Plano de transformação: horizontes em setas + entregáveis --- */ .dm-hz { list-style: none; display: grid; gap: 6px; } .dm-hz li { position: relative; padding: 16px 20px; color: #fff; transition: transform .2s var(--ease-io-quad); } .dm-hz li:nth-child(1) { background: #0e76ff; } .dm-hz li:nth-child(2) { background: #035fd8; } .dm-hz li:nth-child(3) { background: #004aad; } .dm-hz li:nth-child(4) { background: #0b3473; } .dm-hz li:nth-child(5) { background: #0a1830; } .dm-hz b { display: block; font: 700 16px/1.25 var(--f-title); } .dm-hz span { display: block; margin-top: 2px; font-size: 13px; color: rgba(243, 243, 243, .78); } .js-reveal .dm-hz li { opacity: 0; transform: translateX(-16px); } .js-reveal .dm-hz.is-in li { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--i) * .12s), transform .7s var(--ease-out-circ) calc(var(--i) * .12s); } .dm-hz li:hover, .js-reveal .dm-hz.is-in li:hover { transform: translateY(-3px); transition-delay: 0s; } .dm-dl { display: grid; gap: 12px; margin-top: 16px; } .dm-dl > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 18px 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: box-shadow .2s; } .dm-dl > div:hover { box-shadow: inset 0 0 0 1px var(--blue), 0 14px 28px rgba(7, 20, 43, .08); } .dm-dl svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; background: #e9f1ff; fill: none; stroke: var(--logo-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dm-dl b { font: 700 16px/1.3 var(--f-title); } .dm-dl span { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); } @media (min-width: 700px) { .dm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .dm-hz { grid-template-columns: repeat(5, 1fr); } .dm-hz li { padding: 18px 18px 18px 30px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); } .dm-hz li:first-child { padding-left: 20px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); } .dm-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; } } .dm-rd__tg button { border: 0; border-radius: 0; -webkit-appearance: none; appearance: none; } /* ================================================================= CONTATO (comercial.html, 3ª versão, 2026-11-03): seção branca com a malha de pontos do rodapé; cartões azul-marinho (degradê + brilho azul no canto + pontos), no estilo do card aceso dos 5 pilares. Borda tracejada e pino azul no canto (.newsletter do rodapé). Próximos passos nos cards .gp-fases (a luz percorre a borda, js/gp.js). Sem foto e sem mapa. ================================================================= */ /* malha de pontos do rodapé em versão clara: pontos azuis suaves, mais fortes embaixo, e brilho azul no canto */ .ct-main { position: relative; isolation: isolate; overflow: hidden; overflow: clip; } .ct-main::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(14, 118, 255, .14) 1px, transparent 1.6px) 0 0 / 14px 14px, radial-gradient(50% 45% at 92% 100%, rgba(14, 118, 255, .16), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(0, 74, 173, .1), transparent 70%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .6) 45%, #000 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .6) 45%, #000 100%); } .ct-main .sec__intro { hyphens: manual; -webkit-hyphens: manual; } .ct-main .sec__head .eyebrow, .ct-next__head .footer__tag { color: var(--logo-blue); } .ct-card .footer__tag { color: var(--blue-soft); } .ct-grid { display: grid; gap: 16px; } /* cartão azul-marinho: brilho azul no canto de cima à direita + degradê */ .ct-card, .ct-steps .gp-fases__item { position: relative; min-width: 0; color: var(--off-white); background: radial-gradient(70% 80% at 100% 0%, rgba(14, 118, 255, .35), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(0, 74, 173, .22), transparent 70%), linear-gradient(160deg, #0c2556 0%, #07142b 70%); box-shadow: 0 28px 56px -30px rgba(14, 118, 255, .5); } .ct-card { border: 1px dashed rgba(153, 197, 255, .3); } .ct-card::before { content: ""; position: absolute; top: -1px; left: -1px; z-index: 2; width: 6px; height: 6px; background: var(--blue); } /* pontos no canto do cartão */ .ct-card::after, .ct-steps .gp-fases__item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(153, 197, 255, .45) 1px, transparent 1.6px) 0 0 / 12px 12px; -webkit-mask-image: radial-gradient(55% 70% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%); mask-image: radial-gradient(55% 70% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%); opacity: .8; transition: opacity .4s var(--ease-io-quad); } .ct-card > *, .ct-steps .gp-fases__item > * { position: relative; z-index: 1; } /* canais: o cartão inteiro é o link */ .ct-chans { display: grid; gap: 16px; min-width: 0; } .ct-chan { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 22px; transition: border-color .3s var(--ease-io-quad), box-shadow .3s var(--ease-io-quad), transform .3s var(--ease-io-quad); } .ct-chan:hover, .ct-chan:focus-visible { border-color: rgba(153, 197, 255, .7); outline: none; transform: translateY(-3px); box-shadow: 0 36px 64px -28px rgba(14, 118, 255, .7); } .ct-chan:hover::after, .ct-chan:focus-visible::after { opacity: 1; } .ct-chan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ct-chan__ico { display: grid; place-items: center; width: 52px; height: 52px; color: rgba(243, 243, 243, .85); background: rgba(243, 243, 243, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .18); transition: background-color .4s, color .4s, box-shadow .4s; } .ct-chan:hover .ct-chan__ico, .ct-chan:focus-visible .ct-chan__ico { color: #fff; background: var(--logo-blue); box-shadow: 0 0 0 6px rgba(14, 118, 255, .16), 0 0 28px rgba(14, 118, 255, .55); } .ct-chan__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ct-chan__go { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--blue-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-io-quad); } .ct-chan:hover .ct-chan__go, .ct-chan:focus-visible .ct-chan__go { transform: translate(3px, -3px); } .ct-chan__body { display: grid; gap: 8px; } .ct-chan__body strong { font: 700 22px/1.25 var(--f-title); letter-spacing: -.2px; color: #fff; overflow-wrap: anywhere; } .ct-chan__body > span:last-child { font-size: 15px; line-height: 1.45; color: rgba(243, 243, 243, .72); } .ct-social { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px 18px; } main .ct-social p { font-size: 15px; line-height: 1.45; color: rgba(243, 243, 243, .72); } .ct-social .footer__social { margin: 4px 0 0 -8px; } /* formulário (campos como o da newsletter do rodapé) */ .ct-form { padding: 28px 22px; } .ct-form__title { font: 700 26px/1.15 var(--f-title); letter-spacing: -.4px; color: #fff; } main .ct-form__note { margin: 8px 0 24px; font-size: 13px; color: rgba(243, 243, 243, .6); } .ct-form .field label { font: 500 12px/1.4 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--blue-soft); } .ct-form .field input, .ct-form .field select, .ct-form .field textarea { background: rgba(238, 238, 240, .08); color: var(--off-white); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .16); } .ct-form .field input:hover, .ct-form .field select:hover, .ct-form .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .45); } .ct-form .field input:focus, .ct-form .field select:focus, .ct-form .field textarea:focus { background: rgba(14, 118, 255, .12); box-shadow: inset 0 0 0 2px var(--blue); } .ct-form .field input::placeholder, .ct-form .field textarea::placeholder { color: rgba(243, 243, 243, .4); } .ct-form .field select { color-scheme: dark; } .ct-form .field select option, .ct-form .field select optgroup { background: #0a1730; color: var(--off-white); } .ct-ok { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: rgba(243, 243, 243, .75); cursor: pointer; } .ct-ok input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blue); } .ct-ok a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .ct-ok a:hover { color: var(--blue-soft); } .ct-form .form__msg { color: var(--blue-soft); } .ct-form .form__msg:empty { display: none; } .ct-send { --btn-bg: var(--blue); --btn-fg: #fff; --icon-bg: var(--logo-blue); --icon-fg: #fff; filter: drop-shadow(0 10px 28px rgba(14, 118, 255, .45)); } .ct-send .btn__label { font-weight: 700; } .ct-send:hover .btn__icon, .ct-send:focus-visible .btn__icon { --icon-bg: #00327a; } @media (max-width: 559px) { .ct-send { width: 100%; } .ct-send .btn__label { flex: 1; } } /* próximos passos: cards dos 5 pilares em azul-marinho; o aceso ganha a luz na borda e mais brilho */ .ct-next { margin-top: 48px; } .ct-next__head { display: grid; gap: 12px; margin-bottom: 24px; } .ct-next__title { font: 700 28px/1.1 var(--f-title); letter-spacing: -.4px; color: var(--navy); } .ct-steps .gp-fases__item { gap: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: box-shadow .6s var(--ease-io-quad); } .ct-steps .gp-fases__item.is-lit { box-shadow: 0 34px 64px -26px rgba(14, 118, 255, .75); } .ct-steps .gp-fases__item.is-lit::after { opacity: 1; } .ct-steps .gp-fases__title { margin: 22px 0 8px; color: #fff; } main .ct-steps .gp-fases__item p { margin: 0; font-size: 15px; line-height: 1.5; text-align: left; hyphens: manual; color: rgba(243, 243, 243, .78); } .ct-steps .gp-fases__pin svg { width: 24px; height: 24px; stroke-width: 1.8; } @media (max-width: 699px) { .ct-chan__ico { width: 44px; height: 44px; } .ct-chan__ico svg { width: 22px; height: 22px; } .ct-chan__body strong { font-size: 20px; } } @media (min-width: 700px) { .ct-chan { gap: 32px; padding: 24px; } .ct-chans { grid-template-columns: 1fr 1fr; } .ct-social { grid-column: 1 / -1; } } @media (min-width: 1000px) { .ct-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; } /* coluna dos canais estica até a base do formulário (mesma altura) */ .ct-chans { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr auto; } .ct-social { grid-column: auto; } .ct-form { padding: 40px 44px 36px; } .ct-next { grid-column: 1 / -1; margin-top: 72px; } .ct-next__title { font-size: 34px; } .gp-fases.ct-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ct-steps .gp-fases__item { padding: 28px 28px 26px; } } @media (prefers-reduced-motion: reduce) { .ct-chan:hover, .ct-chan:focus-visible { transform: none; } } /* Contato em cartões CLAROS (.ct-claro, só comercial.html, 2026-11-07: "os cards azuis não ficaram bons"). Mesma linguagem dos cards claros do site (Especialistas em Gerenciamento de Projetos, .gp-frentes--claro): branco com borda fina sobre o fundo de pontos, ícone azul em quadrado azul-claro, título azul-marinho, texto cinza; no hover borda azul, sobe 3px e o ícone fica azul cheio. Digital/Trabalhe/Política seguem azul-marinho. */ .ct-claro .ct-card, .ct-claro .ct-steps .gp-fases__item { color: var(--navy); background: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .1), 0 1px 2px rgba(7, 20, 43, .04); } .ct-claro .ct-card::before { display: none; } .ct-claro .ct-card::after, .ct-claro .ct-steps .gp-fases__item::after { display: none; } .ct-claro .ct-chan:hover, .ct-claro .ct-chan:focus-visible { box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .35), 0 24px 44px -24px rgba(7, 20, 43, .35); } .ct-claro .ct-chan__ico, .ct-claro .ct-steps .gp-fases__pin { color: var(--blue); background: rgba(14, 118, 255, .1); box-shadow: none; } .ct-claro .ct-chan:hover .ct-chan__ico, .ct-claro .ct-chan:focus-visible .ct-chan__ico, .ct-claro .ct-steps .gp-fases__item.is-lit .gp-fases__pin { color: #fff; background: var(--blue); box-shadow: none; } .ct-claro .ct-chan__go { stroke: var(--blue); } .ct-claro .ct-card .footer__tag, .ct-claro .ct-steps .gp-fases__num { color: var(--logo-blue); } .ct-claro .ct-chan__body strong, .ct-claro .ct-form__title, .ct-claro .ct-steps .gp-fases__title { color: var(--navy); } .ct-claro .ct-chan__body > span:last-child, .ct-claro .ct-social p, .ct-claro .ct-form__note, .ct-claro .ct-steps .gp-fases__item p { color: var(--muted); } .ct-claro .ct-social .footer__social a { color: var(--navy); } .ct-claro .ct-social .footer__social a:hover, .ct-claro .ct-social .footer__social a:focus-visible { color: #fff; } /* formulário claro */ .ct-claro .ct-form .field label { color: var(--logo-blue); } .ct-claro .ct-form .field input, .ct-claro .ct-form .field select, .ct-claro .ct-form .field textarea { color: var(--navy); background: #f4f6fa; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .14); } .ct-claro .ct-form .field input:hover, .ct-claro .ct-form .field select:hover, .ct-claro .ct-form .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .45); } .ct-claro .ct-form .field input:focus, .ct-claro .ct-form .field select:focus, .ct-claro .ct-form .field textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); } .ct-claro .ct-form .field input::placeholder, .ct-claro .ct-form .field textarea::placeholder { color: rgba(7, 20, 43, .4); } .ct-claro .ct-form .field select { color-scheme: light; } .ct-claro .ct-form .field select option, .ct-claro .ct-form .field select optgroup { background: #fff; color: var(--navy); } .ct-claro .ct-ok { color: var(--muted); } .ct-claro .ct-ok a { color: var(--navy); } .ct-claro .ct-ok a:hover { color: var(--blue); } .ct-claro .ct-form .form__msg { color: var(--logo-blue); } /* passos: o brilho azul do passo aceso vira sombra suave */ .ct-claro .ct-steps .gp-fases__item.is-lit { box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .35), 0 24px 44px -24px rgba(7, 20, 43, .35); } /* ================================================================= POLÍTICA DE PRIVACIDADE (politica-de-privacidade.html, 2026-11-03) "Em resumo" usa os cartões azul-marinho da página de contato (.ct-card, .ct-main). Texto completo: cabeçalho à esquerda (fixo ao rolar no computador), texto à direita. .pp-todo marca os dados da empresa que ainda precisam ser preenchidos. ================================================================= */ .pp-sum { list-style: none; display: grid; gap: 16px; } .pp-sum .ct-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; } .pp-sum .ct-chan__ico { margin-bottom: 12px; } .pp-sum h3 { font: 700 21px/1.2 var(--f-title); letter-spacing: -.2px; color: #fff; } main .pp-sum p { font-size: 15px; line-height: 1.5; color: rgba(243, 243, 243, .75); text-align: left; hyphens: manual; } @media (min-width: 700px) { .pp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .pp-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-sum .ct-card { padding: 28px 26px; } } @media (min-width: 800px) { .pp-head { position: sticky; top: 112px; align-self: start; } } .pp { display: grid; gap: 12px; min-width: 0; } .pp > *, .pp-table { min-width: 0; } .pp-sec { padding: 28px 22px; background: #fff; scroll-margin-top: 96px; } .pp-sec h3 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; font: 700 22px/1.2 var(--f-title); letter-spacing: -.3px; color: var(--navy); } .pp-sec h3 span { flex: none; font: 500 13px/1 var(--f-label); letter-spacing: 1px; color: var(--blue); } main .pp-sec p, .pp-sec li { font-size: 16px; line-height: 1.6; color: rgba(7, 20, 43, .78); } main .pp-sec p + p, .pp-sec ul + p, .pp-sec p + ul, .pp-sec .pp-table + p, .pp-sec p + .pp-table, .pp-sec p + .pp-dpo { margin-top: 14px; } .pp-sec strong { color: var(--navy); } .pp-sec a { color: var(--logo-blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .pp-sec a:hover { color: var(--blue); } .pp-sec ul { list-style: none; display: grid; gap: 10px; } .pp-sec li { position: relative; padding-left: 18px; } .pp-sec li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--blue); } @media (min-width: 1000px) { .pp-sec { padding: 40px 44px; } .pp-rights { grid-template-columns: 1fr 1fr; column-gap: 28px; } } .pp-table { overflow-x: auto; border: 1px dashed rgba(7, 20, 43, .2); } .pp-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; } .pp-table th { padding: 12px 14px; text-align: left; font: 500 12px/1.4 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--navy); } .pp-table td { padding: 12px 14px; vertical-align: top; color: rgba(7, 20, 43, .8); border-top: 1px solid rgba(7, 20, 43, .1); } .pp-table tbody tr:nth-child(even) td { background: #f4f7fc; } .pp-table td:first-child { font-weight: 600; color: var(--navy); } /* celular: cada linha vira um bloco, com o nome da coluna antes do valor */ @media (max-width: 699px) { .pp-table { overflow: visible; border: 0; } .pp-table table, .pp-table tbody, .pp-table tr, .pp-table td { display: block; min-width: 0; } .pp-table thead { display: none; } .pp-table tr { padding: 14px 16px; border: 1px dashed rgba(7, 20, 43, .2); } .pp-table tr + tr { margin-top: 8px; } .pp-table tbody tr:nth-child(even) td { background: none; } .pp-table tbody tr:nth-child(even) { background: #f4f7fc; } .pp-table td { padding: 0; border: 0; } .pp-table td + td { margin-top: 10px; } .pp-table td:first-child { font-size: 16px; } .pp-table td + td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px/1.4 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--logo-blue); } } .pp-dpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px; } .pp-todo { overflow-wrap: anywhere; } .pp-dpo strong { font: 700 20px/1.3 var(--f-title); color: #fff; } main .pp-dpo p { font-size: 15px; color: rgba(243, 243, 243, .78); } .pp-dpo .footer__tag { color: var(--blue-soft); } /* dados ainda não preenchidos: bem visíveis até alguém trocar */ .pp-todo { padding: 0 4px; background: #ffe58a; color: #3a2a00; font-weight: 700; } main .pp-more { padding-top: 14px; border-top: 1px dashed rgba(7, 20, 43, .18); } /* Sobre (2026-10-27): bloco do mapa sem o carrossel de fotos embaixo. O .sec--navy zera o espaço de baixo (o carrossel fazia esse papel), então aqui ele volta ao espaço padrão das seções */ .sec--navy.sec--navy-solo { padding-bottom: 64px; } @media (min-width: 800px) { .sec--navy.sec--navy-solo { padding-bottom: 104px; } } /* ================================================================= NOSSA HISTÓRIA COM FOTOS (sobre.html, 2026-10-27; fotos em Imagens/historia/) Foto principal em 3:2 (as verticais e a de baixa resolução aparecem inteiras sobre um fundo desfocado delas mesmas) e, abaixo, a faixa de fotos menores no formato original, sem recorte. Celular: dentro de cada capítulo. Computador: quadro fixo abaixo do título (.hist-v, js/historia.js). ================================================================= */ .tl__ph { max-width: 600px; margin: 22px 0 0; } .tl__main { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy); } .tl__main .tl__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; } .tl__main .tl__bg { display: none; } .tl__main.is-tall .tl__bg, .tl__main.is-lo .tl__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(20px) brightness(.62); transform: scale(1.2); } .tl__main.is-tall .tl__img { object-fit: contain; } .tl__main.is-lo .tl__img { width: auto; height: auto; max-width: 70%; max-height: 80%; margin: auto; position: absolute; inset: 0; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } .tl__main.is-fx .tl__img { animation: hist-in .5s var(--ease-io-quad); } @keyframes hist-in { from { opacity: 0; } } .tl__ths { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; } .tl__ths::-webkit-scrollbar { display: none; } .tl__th { flex: none; height: 96px; padding: 0; border: 0; cursor: pointer; background: none; opacity: .62; box-shadow: 0 0 0 0 var(--blue); transition: opacity .2s, box-shadow .2s; } .tl__th img { display: block; width: auto; height: 100%; } /* formato original: ninguém é cortado */ .tl__th:hover, .tl__th:focus-visible { opacity: 1; } .tl__th.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--blue); } .tl__ph figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 13px/1.3 var(--f-label); color: rgba(0, 0, 0, .55); } .tl__ph figcaption::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--blue); } /* quadro do computador */ .hist-v { display: none; } @media (min-width: 800px) { .has-hist-v #historia .tl > .tl__ph { display: none; } .hist-v { display: block; margin-top: 32px; } .hist-v__frame { position: relative; box-sizing: content-box; aspect-ratio: 3 / 2; padding-bottom: 120px; } /* foto 3:2 + faixa das menores */ .hist-v__s { position: absolute; inset: 0; max-width: none; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-io-quad), transform .9s var(--ease-out-circ); } .hist-v__s.is-on { opacity: 1; transform: none; } .hist-v__s .tl__main { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: auto; height: calc(100% - 120px); } .hist-v__s.is-on .tl__main.is-wide .tl__img { animation: hist-zoom 9s ease-out both; } /* zoom lento enquanto o capítulo está na tela */ @keyframes hist-zoom { from { transform: scale(1); } to { transform: scale(1.05); } } .hist-v__s .tl__ths { position: absolute; left: 0; right: 0; bottom: 0; height: 112px; margin: 0; } .hist-v__s .tl__th { height: 112px; } .hist-v__s figcaption { position: absolute; left: 0; top: calc(100% - 120px); z-index: 2; margin: 0; padding: 10px 14px; transform: translateY(-100%); background: rgba(7, 20, 43, .82); color: #fff; } .hist-v__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; } .hist-v__tag { padding: 3px 8px; background: rgba(0, 74, 173, .08); color: var(--logo-blue); font: 700 12px/1.4 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; } .hist-v__n { font: 600 13px/1 var(--f-label); color: rgba(0, 0, 0, .45); } .hist-v__n b { color: var(--blue); font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .hist-v__s { transition: none; } .hist-v__s .tl__img, .tl__main.is-fx .tl__img { animation: none !important; } } /* ================================================================= ENGENHARIA DIGITAL (2026-11-03, revisada): página refeita do HTML-modelo do cliente, montada com componentes que já existem no site: .ap-hero + .to-proof (topo), .gp-frentes, .ci-gp__notes, .ap-st, .ap-pn, .ap-mt, .gpr-nb (notebook), .gp-app (celular, js/gp.js), .ge-in, .pcm-seals. Aqui só os ajustes desses componentes e as ilustrações do cliente. Interações em js/ed.js. Prefixo .ed-. ================================================================= */ /* --- Topo: as 4 bases técnicas na linha de destaques (.to-proof de Treinamento online) --- */ .ed-proof { display: grid; gap: 18px 28px; } .ed-proof b { font-size: 18px; letter-spacing: -.2px; } .ed-proof li > span { max-width: 30ch; font-size: 13.5px; line-height: 1.4; } @media (min-width: 700px) { .ed-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ed-hero .page-hero__grid > div:first-child { max-width: 1040px; } .ed-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Frentes em fundo azul-claro: cartões brancos --- */ .sec--tint .ed-frentes li { background: #fff; } /* --- Frase de apoio + notas em 4 colunas (.ci-gp__notes) --- */ .ed-sub { margin: 48px 0 12px; font: 700 18px/1.3 var(--f-title); letter-spacing: -.2px; } .ed-notes { margin-top: 0; } .sec--white .ed-notes li { background: var(--bg-light); } @media (min-width: 700px) { .ed-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ed-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ed-notes--dark { margin-top: 16px; } .ed-notes--dark li { background: rgba(238, 238, 240, .05); box-shadow: inset 3px 0 0 var(--blue), inset 0 0 0 1px rgba(243, 243, 243, .1); } .ed-notes--dark b { color: #fff; } .ed-notes--dark span { color: rgba(243, 243, 243, .7); } /* --- Etapas (.ap-st): cada etapa tem 2 itens em vez de um parágrafo --- */ .ed-st .ap-st__card ul { list-style: none; margin-top: 8px; padding-top: 6px; background: var(--h-dash) left top / 100% 1px no-repeat; } .ed-st .ap-st__card li { position: relative; display: block; padding: 5px 0 5px 14px; font-size: 14px; line-height: 1.45; color: var(--muted); } .ed-st .ap-st__card li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--c); } /* --- Telas do painel: abas (.views) + texto (.ap-pn__l) e notebook (.gpr-nb) --- */ .ed-tk { margin-top: 56px; } .ed-tk .views__switch { margin-bottom: 32px; } .ed-pn__title { margin: 10px 0 0; font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--f-title); letter-spacing: -.4px; } .ed-pn .ap-pn__l { margin-top: 20px; } .sec--white .ed-pn .ap-pn__l li { background: var(--bg-light); } .ed-nb .gpr-nb__view { aspect-ratio: 16 / 10; background: #fff; } .ed-nb .gpr-nb__view > iframe, .ed-nb .gpr-nb__view > video { display: block; width: 100%; height: 100%; border: 0; } .ed-nb--vid .gpr-nb__view { background: #000; } .ed-nb--vid video { object-fit: contain; } .ed-nb--scroll .gpr-nb__view { background: #f3f6fa; } .ed-nb--scroll .gpr-nb__view > iframe { height: 1275px; } .gpr-nb__cap a, .ed-nb__big { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--logo-blue); text-decoration: underline; } /* --- Cartões claros (.ap-mt): ícone no quadrado colorido; item com título + linha de apoio --- */ .ed-mt .ap-mt__h > span svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ed-mt .ap-mt__c ul { margin-bottom: 0; } .ed-mt .ap-mt__c li b { display: block; font: 700 15.5px/1.35 var(--f-title); } .ed-mt .ap-mt__c li span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); } .ed-mt__k { display: block; margin-bottom: 4px; font: 700 12px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--c); } .sec--tint .ed-mt .ap-mt__c { background: #fff; } .ed-mt--sd { margin-top: 16px; } @media (min-width: 1000px) { .ed-mt { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Aplicativos (seção escura): tipos de aplicativo em .ge-in, com rótulo e tecnologias --- */ .ed-in { margin-top: 64px; } .ed-in__tag { display: block; margin-bottom: 8px; font: 700 12px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue-soft); } main .ed-in__who { margin-top: 4px; font-size: 14px; line-height: 1.45; color: rgba(243, 243, 243, .6); text-align: left; } /* --- Produtos: texto à esquerda e a tela à direita, alternando; linha tracejada entre eles --- */ .ed-prd { display: grid; gap: 32px; align-items: center; padding: 40px 0; background: var(--h-dash) left top / 100% 1px no-repeat; } .ed-prd:first-child { padding-top: 0; background: none; } .ed-prd > * { min-width: 0; } .ed-prd__title { margin: 10px 0 8px; font: 700 clamp(26px, 2.6vw, 34px)/1.15 var(--f-title); letter-spacing: -.6px; } main .ed-prd__t p { max-width: 48ch; font-size: 16px; line-height: 1.5; color: var(--muted); text-align: left; } .ed-prd__l { list-style: none; margin-top: 16px; } .ed-prd__l li { position: relative; padding: 9px 0 9px 28px; font-size: 15px; line-height: 1.45; background: var(--h-dash) left top / 100% 1px no-repeat; } .ed-prd__l li:first-child { background: none; } .ed-prd__l li::before { content: "✓"; position: absolute; left: 2px; top: 9px; font: 800 15px/1.45 var(--f-title); color: #0aa355; } .ed-prd__m { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 28px 16px 16px; background: radial-gradient(70% 60% at 50% 42%, #eaf2ff 0%, var(--bg-light) 75%); } .ed-prd__m figcaption { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--muted); } .ed-gal .views__switch { margin-bottom: 20px; } .ed-nb--img .gpr-nb__view { background: #eef2f7; } .ed-nb--img figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; margin: 0; } .ed-nb--img figure[hidden] { display: none; } .ed-nb--img img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; } .ed-nb--img figcaption { padding: 6px 10px; text-align: center; font-size: 12px; color: var(--muted); background: #fff; } @media (min-width: 1000px) { .ed-prd { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; padding: 56px 0; } .ed-prd--rev .ed-prd__m { order: -1; } .ed-prd--rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .ed-prd--wide { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } } /* --- Ilustrações em HTML do cliente (SIP e Diário de Bordo), com as cores do site --- */ .ed-wn { width: 100%; max-width: 400px; overflow: hidden; font-size: 12.5px; background: #fff; box-shadow: 0 18px 40px -16px rgba(7, 20, 43, .28), inset 0 0 0 1px #dce3ed; } .ed-wn__h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; background: var(--navy); } .ed-wn__h b { font: 700 14px/1.2 var(--f-title); } .ed-wn__h span { font-size: 11.5px; color: #8fb6f0; } .ed-wn__t { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid #dce3ed; } .ed-wn__t i { padding: 7px 12px; font-style: normal; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; } .ed-wn__t i.on { color: var(--blue); border-bottom-color: var(--blue); } .ed-wn__t u { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; text-decoration: none; color: #fff; background: var(--blue); } .ed-wn__r { display: grid; gap: 1px; padding: 10px 14px; border-bottom: 1px solid #eef1f6; } .ed-wn__r code { font: 600 10.5px/1.3 var(--f-title); letter-spacing: .04em; color: var(--logo-blue); } .ed-wn__r b { font: 600 12.5px/1.3 var(--f-title); color: var(--navy); } .ed-wn__r span { font-size: 11.5px; color: var(--muted); } .ed-prd em { justify-self: start; margin-top: 4px; padding: 2px 8px; font-style: normal; font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } .ed-prd em.am { color: #9a6200; background: #fff1d6; } .ed-prd em.ok { color: #078c4a; background: #e3f6ec; } .ed-wn__a { display: flex; gap: 8px; padding: 12px 14px; } .ed-wn__a i { padding: 7px 14px; font-style: normal; font-weight: 700; color: var(--muted); box-shadow: inset 0 0 0 1.5px #dce3ed; } .ed-wn__a i.p { color: #fff; background: #0aa355; box-shadow: none; } .ed-dd { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .ed-ph { width: 190px; overflow: hidden; font-size: 11px; background: #fff; border: 5px solid var(--navy); border-radius: 24px; box-shadow: 0 14px 30px rgba(10, 24, 48, .16); } .ed-ph__h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; color: #fff; background: var(--blue); } .ed-ph__h b { font: 700 12.5px/1.2 var(--f-title); } .ed-ph__h span { opacity: .85; } .ed-ph__b { margin: 8px 10px; padding: 7px; text-align: center; font-weight: 700; color: #fff; background: var(--blue); border-radius: 8px; } .ed-ph__b.o { color: var(--blue); background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); } .ed-dd__d { padding: 8px 12px 4px; text-align: center; font-weight: 700; color: var(--navy); } .ed-dd__i { display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px; align-items: center; padding: 7px 12px; border-bottom: 1px solid #eef1f6; } .ed-dd__i > i, .ed-dd__s i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 11px; color: #fff; background: var(--blue); } .ed-dd__i > i.ok, .ed-dd__s i.ok { background: #00bf63; } .ed-dd__i > i.pe, .ed-dd__s i.pe { background: #fff; box-shadow: inset 0 0 0 2px #f5a524; } .ed-dd__s i.de { background: #e5484d; } .ed-dd__s i.nv { background: var(--logo-blue); } .ed-dd svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ed-dd__i b { display: block; font: 600 11px/1.25 var(--f-title); color: var(--navy); } .ed-dd__i span { font-size: 10px; color: var(--muted); } .ed-dd__i em { grid-column: 2; margin-top: 0; padding: 1px 7px; font-size: 9px; } .ed-dd__f { padding: 6px 12px 0; } .ed-dd__f label { display: block; margin: 7px 0 3px; font-weight: 700; font-size: 10px; color: var(--navy); } .ed-fld { padding: 6px 8px; font-size: 10.5px; color: var(--muted); background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1px #dce3ed; } .ed-fld.tall { height: 58px; } .ed-dd__bt { display: flex; gap: 6px; padding: 12px 10px; } .ed-dd__bt i { flex: 1; padding: 6px; text-align: center; font-style: normal; font-weight: 700; color: var(--muted); border-radius: 7px; box-shadow: inset 0 0 0 1.5px #dce3ed; } .ed-dd__bt i.p { color: #fff; background: var(--blue); box-shadow: none; } .ed-dd__s { padding: 2px 12px; } .ed-dd__s div { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #eef1f6; font-weight: 700; color: var(--navy); } /* --- Plataformas (seção escura) --- */ .ed-tls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; } .ed-tls b { margin-right: 6px; font: 700 12px/1.3 var(--f-label); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(243, 243, 243, .6); } .ed-tls span { padding: 8px 14px; font: 700 14px/1.2 var(--f-title); color: #fff; background: rgba(238, 238, 240, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .12); } /* --- Registro: um selo só, centralizado (.pcm-seals da PCM) --- */ .pcm-seals--1 { max-width: 360px; margin-inline: auto; } @media (min-width: 1000px) { .pcm-seals.pcm-seals--1 { grid-template-columns: 1fr; } } /* --- Camada de tela cheia (painel ampliado, telas do SIMAP) --- */ .ed-ov { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(5, 12, 28, .9); } .ed-ov__x { align-self: flex-end; padding: 10px 18px; border: 0; cursor: pointer; font: 700 14px/1 var(--f-title); color: var(--navy); background: #fff; } .ed-ov iframe { flex: 1; width: 100%; border: 0; background: #f3f6fa; } .ed-ov img { max-width: min(1400px, 100%); max-height: calc(100% - 60px); width: auto; height: auto; } /* textos curtos desta página à esquerda (o justificado do site abria buracos) */ main .ed-proof li > span, main .ed-pn .ap-pn__l span, main .ed-mt .ap-mt__c li span { text-align: left; hyphens: manual; } /* SIMAP · aba "Celular": a imagem já é um celular completo; o notebook some enquanto ela está aberta */ .ed-gal:has(#sg4:not([hidden])) .ed-nb--img { display: none; } .ed-gal__ph { display: grid; justify-items: center; gap: 18px; margin: 0; padding: 24px 0 8px; } .ed-gal__ph[hidden] { display: none; } .ed-gal__ph img { display: block; width: auto; height: 460px; max-width: 100%; cursor: zoom-in; filter: drop-shadow(0 24px 40px rgba(7, 20, 43, .22)); } .ed-gal__ph figcaption { font-size: 12.5px; color: var(--muted); } /* SIP: a janela do sistema sozinha, maior, no palco com brilho azul (o mesmo do Diário de Bordo) */ .ed-sip-stage { position: relative; display: grid; justify-items: center; padding: 8px 0 0; } .ed-sip-stage figcaption { position: relative; z-index: 1; margin-top: 18px; font-size: 12.5px; color: var(--muted); } .ed-prd__nb { margin: 0; } .ed-sip-stage .ed-wn { position: relative; z-index: 1; max-width: 600px; font-size: 13.5px; box-shadow: 0 30px 60px -20px rgba(7, 20, 43, .35), inset 0 0 0 1px #dce3ed; } .ed-sip-stage .ed-wn__h { padding: 14px 20px; } .ed-sip-stage .ed-wn__h b { font-size: 16px; } .ed-sip-stage .ed-wn__t { padding: 10px 16px 0; } .ed-sip-stage .ed-wn__r { grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 12px 20px; } .ed-sip-stage .ed-wn__r code { grid-row: span 2; font-size: 12px; } .ed-sip-stage .ed-wn__r b { font-size: 14.5px; } .ed-sip-stage .ed-wn__r span { grid-column: 2; font-size: 12.5px; } .ed-sip-stage .ed-wn__r em { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 10.5px; } .ed-sip-stage .ed-wn__a { padding: 14px 20px; } @media (max-width: 559px) { .ed-sip-stage .ed-wn__r { grid-template-columns: minmax(0, 1fr) auto; } .ed-sip-stage .ed-wn__r code { grid-row: auto; } .ed-sip-stage .ed-wn__r span { grid-column: 1; } .ed-sip-stage .ed-wn__r em { grid-column: 2; grid-row: 1 / span 3; } } /* Diário de Bordo: as 3 telas na moldura de celular do protótipo da PCM (.gacat-mock), escalonadas, com o brilho azul de fundo */ .ed-dd-stage { position: relative; display: grid; justify-items: center; margin: 0; padding: 12px 0 0; } .ed-dd-stage .ed-dd { position: relative; z-index: 1; flex-wrap: nowrap; align-items: center; gap: 0; } .ed-dd-stage .ed-ph { position: relative; flex: none; width: 236px; padding: 8px; overflow: visible; font-size: 11.5px; background: #0b1220; border: 0; border-radius: 36px; box-shadow: 0 24px 48px rgba(10, 42, 102, .32); } .ed-ph__scr { position: relative; height: 470px; overflow: hidden; background: #fff; border-radius: 28px; } .ed-ph__scr::before { content: ""; position: absolute; top: 7px; left: 50%; z-index: 2; width: 74px; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #0b1220; } .ed-dd-stage .ed-ph__h { padding: 34px 14px 12px; } .ed-dd-stage .ed-ph:nth-child(1) { transform: translateX(28px) scale(.9) rotate(-3deg); } .ed-dd-stage .ed-ph:nth-child(2) { z-index: 2; } .ed-dd-stage .ed-ph:nth-child(3) { transform: translateX(-28px) scale(.9) rotate(3deg); } .ed-dd-stage figcaption { position: relative; z-index: 1; } @media (max-width: 699px) { .ed-dd-stage .ed-dd { justify-content: flex-start; gap: 12px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 16px; } .ed-dd-stage .ed-dd::-webkit-scrollbar { display: none; } .ed-dd-stage .ed-ph { scroll-snap-align: center; transform: none !important; } } @media (min-width: 1000px) { .ed-prd--rev .ed-prd__nb { order: -1; } } .ed-sip-stage .ed-wn__r { padding-top: 10px; padding-bottom: 10px; } /* brilho atrás do SIP e do Diário: elipse que some antes da borda (sem quina de azul cortado) */ .ed-dd-stage .pcm-tc__glow, .ed-sip-stage .pcm-tc__glow { inset: -6% -4%; background: radial-gradient(closest-side, rgba(14, 118, 255, .2), rgba(14, 118, 255, .08) 55%, transparent); } /* Aplicativos: o bloco do celular é um subnível do cabeçalho da seção (um só título grande na seção) */ .ed-app3d { margin-top: 24px; } .ed-app3d .gp-app__copy > .eyebrow { margin-bottom: 6px; } .ed-app3d .gp-app__title { max-width: none; font: 700 21px/1.3 var(--f-title); letter-spacing: -.2px; } .ed-app3d .gp-app__list { margin-top: 20px; } @media (min-width: 1000px) { .ed-app3d { margin-top: 40px; } } /* Produtos (revisão): um produto por vez — seletor + painel único, texto à esquerda e a tela à direita, altura fixa */ .ed-prds > .views__switch { margin-bottom: 0; } .ed-prds .ed-prd { padding: 28px 20px; background: var(--bg-light); } .ed-prds .ed-prd:first-child { padding-top: 28px; } .ed-prds .ed-prd[hidden] { display: none; } .ed-prds .ed-prd__title { margin-top: 8px; } @media (min-width: 1000px) { .ed-prds .ed-prd, .ed-prds .ed-prd:first-child { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; min-height: 640px; padding: 48px; } .ed-prds .ed-prd__nb { order: 0; } } /* telas do SIMAP: os botões ficam embaixo do notebook, como legenda da imagem */ .ed-gal { display: flex; flex-direction: column; } .ed-gal > .views__switch { order: 2; align-self: center; margin: 18px 0 0; background: #fff; } .ed-gal > .views__switch .views__btn { padding: 8px 14px; font-size: 13px; } .ed-gal .ed-gal__ph { padding-top: 0; } .ed-gal .ed-gal__ph img { height: 380px; } /* cartões "Sob demanda" e "Modernização" mais compactos */ .ed-mt--sd { margin-top: 12px; } .ed-mt--sd .ap-mt__c { padding: 24px 24px 18px; } .ed-mt--sd .ap-mt__h > span { width: 52px; height: 52px; } .ed-mt--sd .ap-mt__c ul { margin-top: 14px; } .ed-mt--sd .ap-mt__c li { padding: 7px 0 7px 26px; } .ed-mt--sd .ap-mt__c li::before { top: 7px; } @media (max-width: 559px) { .ed-gal > .views__switch { flex-wrap: nowrap; } .ed-gal > .views__switch .views__btn { padding: 7px 9px; font-size: 12px; white-space: nowrap; } } /* Aplicativos (revisão): um só título na seção. O nome do app vira a legenda do celular e a instrução fica acima da lista */ .ed-app3d { margin-top: 8px; } .ed-app3d .gp-app__list { margin-top: 0; } .ed-app-cap { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; margin-top: 28px; text-align: center; } .ed-app-cap .eyebrow { margin: 0; color: var(--blue-soft); } .ed-app-cap b { font: 700 18px/1.3 var(--f-title); color: #fff; } @media (min-width: 1000px) { .ed-app3d .gp-app__copy { align-self: start; margin-top: 24px; } } /* PCM · formas 01 e 02 (revisão): mesma estrutura nos dois cards — faixa, texto, destaque e, na base, o rodapé de ação alinhado com o fim das entregas (01 azul, 02 verde) */ .pcm-forma { align-items: stretch; } .pcm-forma__main { display: flex; flex-direction: column; gap: 20px; } .pcm-forma .pcm-of__hl { display: block; padding: 16px 20px; } .pcm-forma__cta { margin-top: auto; padding-top: 20px; background: var(--h-dash) left top / 100% 1px no-repeat; } .pcm-forma--g .pcm-forma__cta .btn--primary { --icon-bg: #0aa355; } @media (min-width: 1000px) { .pcm-forma .pcm-tiles { align-self: start; } } /* PCM · formas 01 e 02 lado a lado: mesma altura; dentro de cada card faixa, texto, destaque, entregas e o botão na base */ .pcm-formas__grid { display: grid; gap: 16px; } .pcm-formas__grid .pcm-forma + .pcm-forma { margin-top: 0; } @media (min-width: 1000px) { .pcm-formas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcm-formas__grid .pcm-forma { display: flex; flex-direction: column; gap: 20px; padding: 36px 32px; } .pcm-formas__grid .pcm-forma__main { display: contents; } .pcm-formas__grid .pcm-forma .pcm-tiles { order: 1; align-self: stretch; } .pcm-formas__grid .pcm-forma__cta { order: 2; } } /* PCM · Tecnologia: o convite para usar o protótipo é um destaque acima do celular (selo azul, ícone de toque que pulsa, seta para o aparelho) */ .pcm-tc__stage .pcm-tc__hint { order: -1; z-index: 2; display: inline-flex; align-items: center; gap: 12px; max-width: 360px; margin: 0 0 22px; padding: 12px 18px 12px 12px; text-align: left; font-size: 14.5px; line-height: 1.4; color: #fff; background: var(--blue); box-shadow: 0 16px 32px -12px rgba(14, 118, 255, .6); } .pcm-tc__stage .pcm-tc__hint::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--blue); transform: rotate(45deg); } .pcm-tc__stage .pcm-tc__hint b { font-weight: 700; } .pcm-tc__tap { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .pcm-tc__tap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); animation: pcm-tap 1.8s ease-out infinite; } .pcm-tc__tap svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @keyframes pcm-tap { to { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } } @media (prefers-reduced-motion: reduce) { .pcm-tc__tap::before { animation: none; } } main .pcm-tc__stage .pcm-tc__hint span:last-child { text-align: left; } /* PCM · "Não é trocar a equipe": sem foto, vira o chamado final da página (texto à esquerda, botão à direita) */ .pcm-ah__box.pcm-ah__box--cta { display: grid; gap: 24px; min-height: 0; padding: 32px 24px; background: radial-gradient(120% 140% at 90% 0%, #0b2b66 0%, #07142b 55%, #02060f 100%); } .pcm-ah__box--cta .pcm-ah__boxtext { display: block; min-height: 0; max-width: none; padding: 0; } .pcm-ah__box--cta .pcm-ah__boxtext h3 { max-width: 20ch; } main .pcm-ah__box--cta .pcm-ah__boxtext p { max-width: 52ch; } @media (min-width: 1000px) { .pcm-ah__box.pcm-ah__box--cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 56px; } } /* "Não é trocar a equipe": botão grande embaixo do texto; à direita a seta animada das chamadas do site (.cta-band__art) */ .pcm-ah__box.pcm-ah__box--cta { position: relative; isolation: isolate; display: block; padding: 40px 24px; } .pcm-ah__box--cta .pcm-ah__boxtext { position: relative; z-index: 1; } .pcm-ah__box--cta .pcm-ah__cta { margin-top: 28px; } .pcm-ah__art { z-index: 0; opacity: .3; } @media (min-width: 1000px) { .pcm-ah__box.pcm-ah__box--cta { padding: 64px 56px; } .pcm-ah__box--cta .pcm-ah__boxtext { max-width: 640px; } .pcm-ah__art { right: 5%; bottom: 16%; width: min(34%, 440px); opacity: 1; } } /* "Não é trocar a equipe": botão igual ao "Fale com o nosso time comercial" do rodapé (.site-footer .btn--cta, style.css) */ .pcm-ah__box--cta .btn--cta { --btn-bg: var(--blue); --btn-fg: #fff; --icon-bg: var(--logo-blue); --icon-fg: #fff; filter: drop-shadow(0 10px 28px rgba(14, 118, 255, .45)); } .pcm-ah__box--cta .btn--cta .btn__label { font-weight: 700; } .pcm-ah__box--cta .btn--cta:hover .btn__icon, .pcm-ah__box--cta .btn--cta:focus-visible .btn__icon { --icon-bg: #00327a; } @media (min-width: 800px) { .pcm-ah__box--cta .btn--cta { height: 56px; font-size: 17px; } .pcm-ah__box--cta .btn--cta .btn__label, .pcm-ah__box--cta .btn--cta .btn__label > span, .pcm-ah__box--cta .btn--cta .btn__icon, .pcm-ah__box--cta .btn--cta .btn__icon > span { height: 56px; } .pcm-ah__box--cta .btn--cta .btn__label { padding: 0 28px; } .pcm-ah__box--cta .btn--cta .btn__icon, .pcm-ah__box--cta .btn--cta .btn__icon > span { width: 56px; } } /* ================================================================= TOPOS (2026-11-03): sem a etiqueta azul acima do título (removida do HTML) e título com no máximo uma quebra de linha. No computador o título usa até 1040px (o texto de apoio continua com 720px); no celular o título fica um pouco menor. text-wrap: balance divide as duas linhas por igual. Backup em backup/antes-heros-sem-eyebrow/. ================================================================= */ .page-hero__title { max-width: none; } @media (max-width: 799px) { .page-hero__title { font-size: clamp(30px, 8.6vw, 40px); } } @media (min-width: 800px) { .page-hero--split .page-hero__grid > div:first-child { max-width: 1040px; } .page-hero__lead { max-width: 720px; } } /* Treinamento online: o título ocupa as duas colunas (texto + imagem) para caber em 2 linhas */ .to-hero .to-hero__grid > .to-hero__title { grid-column: 1 / -1; } @media (min-width: 1000px) { /* título em 2 linhas na largura toda; embaixo, uma faixa: texto + botões + números à esquerda e os tablets à direita, centralizados na altura do texto (2026-11-03) */ .to-hero .to-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: 56px; row-gap: 32px; align-items: start; } .to-hero .to-hero__grid > div { align-self: start; } .to-hero .to-hero__art { align-self: start; justify-self: center; width: 100%; max-width: 380px; margin: -12px 0 0; } } @media (max-width: 799px) { .to-hero__title.page-hero__title { font-size: clamp(28px, 7.8vw, 38px); } } @media (min-width: 1000px) { .to-hero__title.page-hero__title { font-size: clamp(28px, 2.85vw, 54px); } } /* 2.85vw: cabe em 2 linhas (quebra fixa, 2026-11-07) */ /* Espaço acima do topo igual em todas as páginas (2026-11-03): os topos com animação/ilustração (--mesh, --plant, ap-hero, to-hero) tinham altura mínima com o conteúdo no centro ou na base, o que abria um vão grande acima da linha tracejada. Agora o conteúdo começa no mesmo ponto de todos os outros (linha a 102px do topo no computador). */ @media (min-width: 1000px) { .page-hero--mesh, .page-hero--plant, .ap-hero.page-hero--mesh, .to-hero.page-hero--mesh { align-items: flex-start; } } /* ...e sem altura mínima: o topo termina 96px abaixo do conteúdo, como os demais. Gerenciamento de Projetos (--plant) mantém a altura por causa da planta 3D à direita. */ @media (min-width: 1000px) { .page-hero--mesh, .page-hero--mesh:has(.page-hero__title--2l), .ap-hero.page-hero--mesh, .to-hero.page-hero--mesh { min-height: 0; padding-bottom: 96px; } } /* Altura padronizada (2026-11-07, pedido do usuário): no computador todos os topos das páginas internas têm a mesma altura (704px = cabe o mais alto, Engenharia Digital em 1100px). A home (.hero) não entra. Conteúdo centralizado na vertical (2026-11-07): em cima só a altura do menu; o bloco (linha tracejada → botões) fica no meio do espaço abaixo do menu, com o mesmo vão em cima e embaixo. */ @media (min-width: 1000px) { .page-hero, .page-hero.page-hero--mesh, .page-hero.page-hero--mesh:has(.page-hero__title--2l), .page-hero.ap-hero.page-hero--mesh, .page-hero.to-hero.page-hero--mesh, .page-hero.page-hero--plant { min-height: 600px; box-sizing: border-box; /* 2026-11-09: 704 → 600 (menos vão embaixo) */ display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: calc(var(--header-h) + 48px + env(safe-area-inset-top, 0px)); padding-bottom: 72px; /* 2026-11-09 (pedido do usuário): conteúdo encostado em cima, linha tracejada 48px abaixo do menu (antes centralizado, sobrava vão em cima) */ } .page-hero > .wrap { width: 100%; } } /* "Normas e registro" sobre fundo branco (Controle Inicial): cartão do selo em cinza-azulado */ .sec--white .pcm-seals li { background: #eef2f8; } /* ================================================================= CHAMADOS PARA INTERAGIR (2026-11-03): "Experimentar o app interativo", "Abrir em tela cheia" e "Ampliar painel" têm sempre o mesmo destaque — botão azul com ícone (toque ou expandir), sombra azul e um contorno que pulsa de leve. Páginas: Engenharia Digital, Gerenciamento de Projetos, Gestão de Paradas e PCM. Backup em backup/antes-ctas-interativos/. ================================================================= */ .btn--try { --btn-bg: var(--blue); --btn-fg: #fff; --icon-bg: var(--logo-blue); --icon-fg: #fff; position: relative; filter: drop-shadow(0 10px 24px rgba(14, 118, 255, .45)); } .btn--try .btn__label { font-weight: 700; } .btn--try .btn__icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .btn--try:hover .btn__icon, .btn--try:focus-visible .btn__icon { --icon-bg: #00327a; } .btn--try::after { content: ""; position: absolute; inset: -5px; pointer-events: none; border: 2px solid rgba(14, 118, 255, .7); animation: try-pulse 2.4s var(--ease-out-circ) infinite; } @keyframes try-pulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.04, 1.3); } } .btn--try:hover::after, .btn--try:focus-visible::after { animation: none; opacity: 0; } /* dentro da legenda do notebook (Engenharia Digital): botão próprio, centralizado numa linha */ .gpr-nb__cap .btn--try, .gpr-nb__cap .btn--try.ed-nb__big { display: flex; width: fit-content; margin: 14px auto 0; padding: 0; border: 0; background: none; font: 500 14px/1 var(--f-display); text-decoration: none; color: inherit; } /* Gestão de Paradas: "Ampliar painel" na barra de controles do painel */ .gpr-pc__a .gpr-pc__fs { position: relative; color: #fff; background: var(--blue); box-shadow: 0 8px 20px -6px rgba(14, 118, 255, .6); } .gpr-pc__a .gpr-pc__fs:hover, .gpr-pc__a .gpr-pc__fs:focus-visible { color: #fff; background: var(--logo-blue); } .gpr-pc__a .gpr-pc__fs svg { stroke: currentColor; } .gpr-pc__a .gpr-pc__fs::after { content: ""; position: absolute; inset: -4px; pointer-events: none; border: 2px solid rgba(14, 118, 255, .7); animation: try-pulse 2.4s var(--ease-out-circ) infinite; } .gpr-pc__a .gpr-pc__fs:hover::after { animation: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { .btn--try::after, .gpr-pc__a .gpr-pc__fs::after { animation: none; opacity: 0; } } /* PCM: "Abrir em tela cheia" fica centralizado abaixo do notebook do Power BI */ .pcm-bi__cta { display: flex; justify-content: center; margin-top: 32px; } /* ...no computador ele fica dentro do palco preso na tela, logo abaixo do notebook, e só aparece quando o notebook termina de abrir (classe .is-open, js/pcm.js) */ @media (min-width: 701px) { .pcm-mac-stage { align-content: center; row-gap: 22px; } .pcm-mac-stage .pcm-bi__cta { margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--ease-io-quad), transform .45s var(--ease-out-circ), visibility 0s linear .45s; } .pcm-mac.is-open + .pcm-bi__cta { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } } /* celular/tablet: o texto logo abaixo do título; os tablets com espaço próprio embaixo */ @media (max-width: 999px) { .to-hero .to-hero__grid { row-gap: 8px; } .to-hero .to-hero__art { margin-top: 40px; } } /* Treinamento online (2026-11-03, a pedido): título em 3 linhas na coluna da esquerda, com o texto logo abaixo; os tablets ocupam a coluna da direita ao lado de tudo (título + texto), centralizados na altura */ @media (min-width: 1000px) { .to-hero .to-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); row-gap: 0; align-items: center; } .to-hero .to-hero__grid > .to-hero__title { grid-column: 1; grid-row: 1; } .to-hero .to-hero__grid > div { grid-column: 1; grid-row: 2; } .to-hero .to-hero__art { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; max-width: 420px; } } /* PCM: o trecho do notebook usa 100vw (inclui a barra de rolagem) e deixava a página 8px mais larga. overflow-x: clip corta só na horizontal e não quebra o sticky do notebook (2026-11-03, revisão da entrega 09) */ #tecnologia { overflow-x: clip; } /* ================================================================= PROJETOS (projetos.html, rev. 0611) — portfólio do HTML do cliente 32 cards no formato .svc da home (foto 16:10 no topo, segmento, cliente, unidade, local). OPEX/CAPEX abrem a lista de serviços (js/projetos.js). Cores: OPEX azul, CAPEX azul-marinho, como nas colunas da página Soluções. ================================================================= */ .pjs { list-style: none; display: grid; gap: 12px; } @media (min-width: 600px) { .pjs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pjs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .pjs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pj { position: relative; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); } .pj.is-open { z-index: 3; } /* card com a lista aberta fica por cima dos vizinhos */ .pj .svc__link { padding: 16px 16px 18px; gap: 6px; } .pj__media { margin-bottom: 10px; } .pj__media::after { display: none; } /* sem degradê: o logo do cliente fica no pé da foto */ .pj__media .svc__img { object-position: left bottom; } /* o recorte nunca corta o logo (canto inferior esquerdo) */ .pj__media .svc__img[src*="/sem-logo/"] { object-position: center; } /* fotos novas sem logo (2026-11-09): enquadramento central */ .pj__seg { font: 500 12px/1.3 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--blue); } .pj .svc__title { font-size: 21px; max-width: none; } .pj .svc__desc { font-size: 15px; } .pj__loc { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } .pj__loc svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--blue); stroke-width: 1.8; } .pj__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 4px, transparent 4px 8px) left 4px / 100% 1px no-repeat; } .pj__tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; cursor: pointer; font: 700 12px/1 var(--f-label); letter-spacing: 1.04px; color: var(--logo-blue); background: rgba(14, 118, 255, .1); transition: background-color .25s var(--ease-io-quad), color .25s var(--ease-io-quad); } .pj__tag svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-io-quad); } .pj__tag--cp { color: var(--navy); background: rgba(7, 20, 43, .08); } .pj__tag:hover { background: rgba(14, 118, 255, .18); } .pj__tag--cp:hover { background: rgba(7, 20, 43, .14); } .pj__tag[aria-expanded="true"] { color: #fff; background: var(--blue); } .pj__tag--cp[aria-expanded="true"] { background: var(--navy); } .pj__tag[aria-expanded="true"] svg { transform: rotate(180deg); } /* lista de serviços: painel suspenso logo abaixo das etiquetas, por cima da grade (não muda a altura dos cards) */ .pj__sv { position: absolute; left: 16px; right: 16px; top: calc(100% - 12px); z-index: 2; padding: 12px 14px; background: #fff; box-shadow: inset 3px 0 0 var(--blue), 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 40px rgba(7, 20, 43, .18); } .pj__sv--cp { box-shadow: inset 3px 0 0 var(--navy), 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 40px rgba(7, 20, 43, .18); } .pj__sv small { display: block; margin-bottom: 6px; font: 500 11px/1.3 var(--f-label); letter-spacing: 1.04px; text-transform: uppercase; color: var(--muted); } .pj__sv ul { list-style: none; display: grid; gap: 2px; } .pj__sv a { display: block; padding: 4px 0; font-size: 14.5px; line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(14, 118, 255, .35); text-underline-offset: 3px; } .pj__sv a:hover { color: var(--logo-blue); text-decoration-color: currentColor; } /* ================================================================= PROCEDIMENTOS DE MANUTENÇÃO (solucoes/procedimentos-de-manutencao.html, 2026-11-06) Página no layout do Controle Inicial (.ci-*, js/ci.js). Aqui só o que é novo: páginas do modelo (galeria do site), aba com o notebook do Power BI e o "Painel dos procedimentos" (status, famílias e entregas por semana). ================================================================= */ /* aba 01: as 4 páginas do procedimento lado a lado; clique amplia (lightbox de js/pages.js) */ .pr-pages { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .pr-pages { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pr-pages .gallery__item { display: grid; gap: 6px; overflow: visible; background: none; } .pr-pages .gallery__btn { overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); } .pr-pages .gallery__btn img { display: block; width: 100%; height: auto; aspect-ratio: 404 / 595; object-fit: cover; object-position: top; transition: transform .6s var(--ease-out-circ); } .pr-pages__n { font: 700 11px/1.2 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: rgba(243, 243, 243, .7); text-align: center; } /* aba 02: Matriz de Bloqueio no notebook, painel inteiro (sem coluna de texto) */ .pr-bi { padding: 28px 18px 24px; } @media (min-width: 1000px) { .ci-ex__panel.pr-bi { grid-template-columns: minmax(0, 1fr); padding: 40px 40px 32px; } } .pr-bi .gpr-nb { width: 100%; max-width: 820px; margin-inline: auto; } /* notebook cabe inteiro na tela */ /* Painel dos procedimentos (dentro do .ci-dash) */ .pr-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 459px) { .pr-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ci-kpi dd.is-teal { color: #3FD8C4; } .pr-stack { display: flex; height: 14px; gap: 2px; } .pr-stack i { display: block; width: var(--w); background: var(--c); transform-origin: left; transition: transform .9s var(--ease-out-circ) .3s; } .js-reveal .ci-dash:not(.is-in) .pr-stack i { transform: scaleX(0); } .pr-stack__lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: rgba(243, 243, 243, .8); } .pr-stack__lg span { display: inline-flex; align-items: center; gap: 6px; } .pr-stack__lg span::before { content: ""; width: 9px; height: 9px; background: var(--c); } .pr-stack__lg b { color: #fff; } .pr-fam .ci-dash__r { grid-template-columns: 150px minmax(0, 1fr) 46px; } .pr-fam .ci-dash__r b em { font-style: normal; font-weight: 400; color: rgba(243, 243, 243, .55); } @media (max-width: 559px) { .pr-fam .ci-dash__r { grid-template-columns: 110px minmax(0, 1fr) 42px; } } .ci-dash__leg i.pr-pv { background: transparent; border: 1px dashed rgba(143, 192, 255, .7); } .pr-wk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; height: 96px; } .pr-wk > div { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; } .pr-wk span { position: relative; } .pr-wk i, .pr-wk em { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); transform-origin: bottom; transition: transform .9s var(--ease-out-circ) .3s; } .pr-wk i { border: 1px dashed rgba(143, 192, 255, .55); } /* previsto: contorno tracejado */ .pr-wk em { left: 20%; right: 20%; background: #2E8BFF; } /* realizado: barra cheia */ .pr-wk .is-fut i { border-color: rgba(143, 192, 255, .3); } .pr-wk small { font-size: 10px; text-align: center; color: rgba(243, 243, 243, .55); } .js-reveal .ci-dash:not(.is-in) .pr-wk i, .js-reveal .ci-dash:not(.is-in) .pr-wk em { transform: scaleY(0); } @media (prefers-reduced-motion: reduce) { .pr-stack i, .pr-wk i, .pr-wk em { transition: none; } } /* Carrossel "Nossos projetos" (fim das páginas de solução, 2026-11-06): foto com o logo do cliente no canto inferior esquerdo (já vem na foto), sem degradê nem legenda; título "Cidade, Estado". */ .svc--loc .svc__media::after { display: none; } .svc--loc .svc__img { object-position: left bottom; } .svc--loc .svc__title { max-width: none; } /* texto de apoio do "Nossos projetos": frase curta, sem justificar (abria buracos entre as palavras) */ main .rail__head .sec__intro { text-align: left; hyphens: manual; -webkit-hyphens: manual; max-width: 56ch; } /* termo que não pode quebrar no hífen (ex.: CREA-MG) */ .nowrap { white-space: nowrap; } /* Sobre: foto da nova sede como fundo do topo, no MESMO padrão dos outros topos (texto no alto, véu padrão). Só o enquadramento muda: a foto cabe inteira na largura e, com o recorte vertical em 55%, o letreiro fica à direita do título e acima do texto de apoio. Sem zoom lento (cortaria a foto). 2026-11-06. */ .sobre-hero .hero-fade picture.is-active img.sobre-hero__sede { animation: none; } .sobre-hero .page-hero__media img.sobre-hero__sede { object-position: center 55%; } /* ================================================================= TRABALHE CONOSCO (2026-11-06): Cultura usa .gp-frentes + .ct-card (GP/Contato). Vagas: áreas em 2 colunas + cartão azul-marinho do banco de talentos (.ct-card). ================================================================= */ @media (min-width: 900px) { .tc-vagas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; } } .tc-vagas > * { align-self: stretch; } .tc-vagas .fit { padding: 28px 28px 30px; } .tc-vagas .fit .tabs__label { margin-top: 0; } /* os dois cartões começam na mesma altura */ .tc-talentos { display: flex; flex-direction: column; padding: 28px 28px 30px; } .tc-talentos .tabs__label { margin-top: 0; color: var(--blue-soft); } .tc-talentos .views__title { color: #fff; } main .tc-talentos .views__lead { margin-top: 8px; color: rgba(243, 243, 243, .75); text-align: left; hyphens: manual; } .tc-passos { list-style: none; display: grid; gap: 2px; margin: 8px 0 24px; } .tc-passos li { display: flex; align-items: center; gap: 14px; padding: 12px 0; font: 600 16px/1.3 var(--f-title); color: #fff; background: repeating-linear-gradient(90deg, rgba(153, 197, 255, .28) 0 4px, transparent 4px 8px) left bottom / 100% 1px no-repeat; } .tc-passos b { display: grid; place-items: center; flex: none; width: 36px; height: 36px; font: 700 12px/1 var(--f-label); color: #fff; background: rgba(243, 243, 243, .06); box-shadow: inset 0 0 0 1px rgba(243, 243, 243, .18); } .tc-talentos__cta { margin-top: auto; } .tc-talentos__mail { margin-top: 14px; font-size: 14px; } .tc-talentos__mail a { color: var(--blue-soft); text-decoration: underline; text-underline-offset: 3px; } .tc-talentos__mail a:hover { color: #fff; } /* aviso dos botões de e-mail ([data-mail], js/pages.js): endereço copiado + link para o Gmail */ .mail-note { margin-top: 12px; max-width: 52ch; font-size: 14px; line-height: 1.5; color: var(--muted); } .mail-note a { color: var(--logo-blue); text-decoration: underline; text-underline-offset: 3px; } [data-theme="dark"] .mail-note, .ct-card .mail-note { color: rgba(243, 243, 243, .8); } [data-theme="dark"] .mail-note a, .ct-card .mail-note a { color: var(--blue-soft); } .ct-card .mail-note b, [data-theme="dark"] .mail-note b { color: #fff; } /* cartão CLARO (.ct-claro, Trabalhe conosco desde 2026-11-07): aviso em cinza/azul, não branco (2026-11-09) */ .ct-claro .ct-card .mail-note { color: var(--muted); } .ct-claro .ct-card .mail-note b { color: var(--navy); } .ct-claro .ct-card .mail-note a { color: var(--logo-blue); } /* Digital > "Onde acompanhar" (2026-11-06): 4 canais nos cartões azul-marinho do Contato (.ct-card.ct-chan) */ .dg-chans { display: grid; gap: 16px; } @media (min-width: 700px) { .dg-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .dg-chans { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ct-chan.dg-chan { justify-content: flex-start; gap: 36px; min-height: 0; } /* títulos alinhados logo abaixo do ícone */ .dg-chan .ct-chan__body strong { font-size: 21px; } main .dg-chan .ct-chan__body > span:last-child { text-align: left; hyphens: manual; text-wrap: pretty; } .dg-chan[href^="#"]:hover .ct-chan__go, .dg-chan[href^="#"]:focus-visible .ct-chan__go { transform: translateY(3px); } /* newsletter: a seta aponta para baixo e desce */ /* ================================================================= JUSTIFICADO NOS BLOCOS REVISTOS EM 2026-11-07 (lembrete do usuário: "não se esqueça de textos justificados"). Estas regras desfazem exceções antigas que deixavam o texto à esquerda: - Digital: texto do PlanningCast (#youtube, dentro de .rail__head) e texto dos cartões de canais (.dg-chan); - Contato (.ct-claro): texto dos cartões, das redes, nota do formulário e dos Próximos passos; - Gerenciamento de Projetos: texto dos cards "Especialistas à frente do seu projeto" (.gp-frentes--claro). ================================================================= */ main #youtube .rail__head .sec__intro, main .dg-chan .ct-chan__body > span:last-child, main .ct-claro .ct-chan__body > span:last-child, main .ct-claro .ct-social p, main .ct-claro .ct-steps .gp-fases__item p, main .gp-frentes--claro > li > span:last-child { text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } /* Trabalhe conosco, "Nosso jeito de trabalhar" (2026-11-07): cartões .gp-fr na versão CLARA (.ct-claro). As regras .gp-fr têm brilho azul e cores para fundo escuro; aqui viram as do card claro. */ .ct-claro .gp-fr__num { color: var(--logo-blue); } .ct-claro .gp-fr:hover, .ct-claro .gp-fr:target, .js-reveal .ct-claro .gp-frentes .gp-fr.is-in:hover, .js-reveal .ct-claro .gp-frentes .gp-fr.is-in:target { border-color: transparent; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .35), 0 24px 44px -24px rgba(7, 20, 43, .35); } .ct-claro .gp-fr:hover .ct-chan__ico, .ct-claro .gp-fr:target .ct-chan__ico { color: #fff; background: var(--blue); box-shadow: none; } .ct-claro .gp-fr .ct-chan__body strong { color: var(--navy); } main .ct-claro .gp-fr .ct-chan__body > span:last-child { color: var(--muted); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Trabalhe conosco, Oportunidades (2026-11-07): "Quer fazer parte do time?" num cartão claro (.fit), igual ao das áreas ao lado; textos justificados; botão azul no pé do cartão */ .tc-talentos.tc-talentos--claro .tabs__label { color: var(--blue); } .tc-talentos.tc-talentos--claro .views__title { color: var(--navy); } main .tc-vagas .views__lead { margin-top: 8px; color: var(--muted); text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } .tc-vagas .views__lead a { color: var(--logo-blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .tc-vagas .views__lead a:hover { color: var(--blue); } .tc-talentos--claro .tc-talentos__cta { margin-top: auto; padding-top: 24px; } /* Trabalhe conosco, Oportunidades 2ª versão (2026-11-07): dois cartões claros iguais, lado a lado. Ícone no topo; título, texto (justificado) e, no 2º, o botão alinhados embaixo. */ .tc-op { display: grid; gap: 16px; } @media (min-width: 800px) { .tc-op { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tc-op__card { display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; min-height: 100%; padding: 28px; } /* títulos dos dois cartões na mesma altura */ .tc-op__body { display: grid; gap: 10px; } .tc-op__title { font: 700 24px/1.2 var(--f-title); letter-spacing: -.3px; color: var(--navy); } main .tc-op__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } .tc-op__text a { color: var(--logo-blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .tc-op__text a:hover { color: var(--blue); } .tc-op__cta { margin-top: 14px; } @media (min-width: 1000px) { .tc-op__card { padding: 36px 40px; } .tc-op__title { font-size: 28px; } } /* 3ª versão: UM cartão com duas metades separadas pela linha tracejada do site */ .tc-op.tc-op--um { display: grid; gap: 0; padding: 0; } .tc-op--um .tc-op__col { display: flex; flex-direction: column; gap: 24px; padding: 28px; } .tc-op--um .tc-op__col + .tc-op__col { background: repeating-linear-gradient(90deg, rgba(7, 20, 43, .18) 0 4px, transparent 4px 8px) left top / 100% 1px no-repeat; } @media (min-width: 800px) { .tc-op.tc-op--um { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc-op--um .tc-op__col { padding: 40px 44px; } .tc-op--um .tc-op__col + .tc-op__col { background: repeating-linear-gradient(180deg, rgba(7, 20, 43, .18) 0 4px, transparent 4px 8px) left top / 1px 100% no-repeat; } } /* ================================================================= TREINAMENTOS · "Conheça nossos treinamentos" (2026-11-07, PDF do cliente) Sem números; agrupado por trilha (título em caixa alta) e cada curso num bloco azul-marinho com o nome centralizado, no formato do modelo do cliente. O bloco inteiro é botão: abre a ementa (js/cursos.js). ================================================================= */ .cg2 { display: grid; gap: 36px; } .cg2__h { margin: 0 0 14px; font: 800 20px/1.2 var(--f-title); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); } .cg2__grid { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .cg2__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .cg2__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cg2__h { font-size: 22px; } } .cg2__item { display: flex; } .cg2__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 128px; padding: 18px 14px; border: 0; cursor: pointer; text-align: center; color: #fff; background: radial-gradient(90% 90% at 50% 0%, rgba(14, 118, 255, .28), transparent 70%), linear-gradient(160deg, #0c2556 0%, #07142b 75%); box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .14); transition: transform .3s var(--ease-io-quad), box-shadow .3s var(--ease-io-quad); } .cg2__name { font: 700 15px/1.3 var(--f-title); text-wrap: balance; } .cg2__more { font: 500 11px/1 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--blue-soft); opacity: .75; transition: opacity .3s; } .cg2__tile:hover, .cg2__tile:focus-visible { outline: none; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(153, 197, 255, .55), 0 22px 40px -22px rgba(14, 118, 255, .7); } .cg2__tile:hover .cg2__more, .cg2__tile:focus-visible .cg2__more { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cg2__tile:hover, .cg2__tile:focus-visible { transform: none; } } /* 2026-11-07 (2): os blocos dos cursos no padrão de card claro do site (como .gp-frentes--claro / .ct-claro): branco, borda fina, título azul-marinho alinhado à esquerda, "Ver ementa →" azul embaixo; no hover barra azul no topo, borda azul e sobe 3px */ .cg2__tile { align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 140px; padding: 22px 20px 18px; text-align: left; color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .1), 0 1px 2px rgba(7, 20, 43, .04); } .cg2__tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out-circ); } .cg2__name { font-size: 16px; color: var(--navy); } .cg2__more { color: var(--logo-blue); opacity: 1; } .cg2__tile:hover, .cg2__tile:focus-visible { box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .35), 0 24px 44px -24px rgba(7, 20, 43, .35); } .cg2__tile:hover::before, .cg2__tile:focus-visible::before { transform: none; } .cg2__tile:hover .cg2__more, .cg2__tile:focus-visible .cg2__more { color: var(--blue); } .cg2__h { font-weight: 700; font-size: 18px; letter-spacing: .06em; color: var(--logo-blue); } @media (min-width: 1100px) { .cg2__h { font-size: 18px; } } /* Treinamentos, "Times treinados dentro das operações" (2026-11-07): texto à esquerda e a foto de destaque (turma CBSI) à direita, inteira (proporção da foto, sem corte), centralizada na altura do texto */ /* 2ª diagramação (2026-11-07): cartão branco único — foto à esquerda (tamanho natural, até 800px, ocupa a altura toda do cartão), texto + botão à direita, centralizados na altura */ .tu-dest__card { display: grid; background: #fff; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .1), 0 30px 60px -36px rgba(7, 20, 43, .35); overflow: hidden; } .tu-dest__foto { position: relative; margin: 0; aspect-ratio: 800 / 509; background: #0b1020; } .tu-dest__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .tu-dest__foto figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; font: 700 12px/1.2 var(--f-label); letter-spacing: .8px; text-transform: uppercase; color: #fff; background: rgba(7, 20, 43, .72); } .tu-dest__txt { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 28px 24px 32px; } main .tu-dest__txt p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } .tu-dest__txt .page-hero__ctas { margin: 0; } @media (min-width: 1000px) { .tu-dest__card { grid-template-columns: minmax(0, 800px) minmax(0, 1fr); } .tu-dest__txt { padding: 48px 56px; } main .tu-dest__txt p { font-size: 20px; } } /* faixa de logos de Treinamentos: fundo azul-claro igual ao da seção abaixo (.sec--tint), pedido de 2026-11-08 (antes: branco) */ .lmq-sec.to-logos { background: #dce5f2; } /* Treinamentos (2026-11-08): cards coloridos antigos (.cg__card, com número) dentro dos grupos por trilha (.cg2__grupo). Cards pequenos como antes: 6 por linha no computador grande (Treinamento técnico cabe numa linha). Cada trilha com sua cor (--c no
  • ). Backup: backup/antes-cards-coloridos/ */ .cg__grid--trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 559px) { .cg__grid--trilha { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 700px) { .cg__grid--trilha { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .cg__grid--trilha { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .cg__grid--trilha { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .cg__grid--trilha .cg__title { font-size: 16.5px; } /* com o mesmo fundo azul-claro, a faixa de logos e "Conheça nossos treinamentos" viram um bloco só: menos vão entre elas */ .lmq-sec.to-logos + .sec--tint { padding-top: 32px; } .lmq-sec.to-logos { padding-bottom: 12px; } /* 2026-11-09: menos vão embaixo da faixa de logos */ /* ================================================================= CANAL DE DENÚNCIAS (canal-de-denuncias.html, 2026-11-08; js/denuncias.js) "Como funciona" = cards da Política (.pp-sum) na versão clara (.ct-claro). Relato: os 2 cards (Acompanhar pelo WhatsApp / Código de Conduta) lado a lado, mesma altura, e o formulário claro de comercial.html embaixo, na largura toda. Perguntas de múltipla escolha em botões (.cd-opts). .cd-todo = aviso amarelo enquanto o formulário não tem destino (data-endpoint). ================================================================= */ .ct-claro .pp-sum h3 { color: var(--navy); } main .ct-claro .pp-sum p { color: var(--muted); } .cd-main .ct-grid { grid-template-columns: minmax(0, 1fr); } .cd-main .ct-chans { grid-template-rows: none; } @media (min-width: 700px) { .cd-main .ct-chans { grid-template-columns: 1fr 1fr; } } .cd-main .ct-chan__body > span:last-child { text-align: left; hyphens: manual; } @media (min-width: 1000px) { .cd-main .ct-form { padding: 44px 48px 40px; } } .cd-todo { margin: -8px 0 24px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: #5a4300; background: #fff3c4; box-shadow: inset 0 0 0 1px #f0d77a; } .cd-todo[hidden] { display: none; } .cd-q { min-width: 0; margin: 0; padding: 0; border: 0; } .cd-q legend { margin-bottom: 10px; padding: 0; font: 500 12px/1.4 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--logo-blue); } .cd-opts { display: flex; flex-wrap: wrap; gap: 8px; } .cd-opts label { position: relative; cursor: pointer; } .cd-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cd-opts span { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 16px; font: 500 15px/1.2 var(--f-display); color: var(--navy); background: #f4f6fa; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .14); transition: background-color .2s, box-shadow .2s, color .2s; } .cd-opts label:hover span { box-shadow: inset 0 0 0 1px rgba(14, 118, 255, .45); } .cd-opts input:checked + span { color: #fff; background: var(--blue); box-shadow: none; } .cd-opts input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; } .ct-claro .cd-form textarea.cd-short { min-height: 96px; } .ct-claro .cd-form input[type="file"] { padding: 10px 12px; font-size: 14px; cursor: pointer; } .cd-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; cursor: pointer; font: 600 13px/1 var(--f-display); color: #fff; background: var(--logo-blue); } .cd-hint { font-size: 13px; color: var(--muted); } .cd-id { display: grid; gap: 16px; } .cd-id[hidden] { display: none; } @media (min-width: 700px) { .cd-id { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cd-form .form__msg a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } /* depois do envio */ .cd-ok { display: grid; justify-items: start; gap: 14px; outline: none; } .cd-ok[hidden] { display: none; } .cd-ok .ct-chan__ico { color: #fff; background: var(--blue); } main .cd-ok p { color: var(--muted); text-align: left; } .cd-ok__proto { display: grid; gap: 6px; padding: 16px 20px; background: #f4f6fa; box-shadow: inset 0 0 0 1px rgba(7, 20, 43, .14); } .cd-ok__proto span { font: 500 12px/1 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--logo-blue); } .cd-ok__proto strong { font: 700 26px/1.1 var(--f-title); letter-spacing: .5px; color: var(--navy); user-select: all; } .cd-copy { padding: 10px 16px; border: 0; cursor: pointer; font: 600 14px/1 var(--f-display); color: var(--blue); background: rgba(14, 118, 255, .1); } .cd-copy:hover { color: #fff; background: var(--blue); } @media (max-width: 699px) { .ct-claro .cd-form textarea.cd-short { min-height: 132px; } } /* Canal de Denúncias (2026-11-09): topo todo preto, sem foto nem malha */ .page-hero.page-hero--preto { background: #000; } /* Política de Privacidade (2026-11-09): cartão do encarregado (.pp-dpo) também na versão clara */ .ct-claro .pp-dpo strong { color: var(--navy); } main .ct-claro .pp-dpo p { color: var(--muted); } .ct-claro .pp-dpo .footer__tag { color: var(--logo-blue); } /* Canal de Denúncias: campo-armadilha para robôs (2026-11-09), fora da tela e fora da leitura */ .cd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Campo-armadilha para robôs nos formulários (2026-11-09): fora da tela */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }