/* ========================================================================= INOVE — folha de estilo do site institucional INOVE VISUAL SYSTEM V1 integrado (Fase 5). Os tokens de marca abaixo são cópia literal de 06-DESIGN/PACOTES/SITE-V1/css/tokens-inove-v1.css — NÃO EDITAR VALOR. Qualquer mudança de marca se faz no sistema canônico, nunca aqui. Regras do sistema aplicadas (LEIA-ME do pacote SITE-V1): 1. Logo sempre em SVG, com troca claro/escuro por prefers-color-scheme. 2. Raio zero em todo o sistema. 3. --inove-vermelho NUNCA como texto sobre navy. Em fundo escuro só --inove-vermelho-claro, e apenas em texto grande ou interface. 4. O teal nunca carrega parágrafo: linha, chip, rótulo e borda apenas. 5. Um elemento vermelho por tela. 6. IBM Plex já é tabular por padrão — não ligar tabular-nums. 7. Área de proteção do logo no header: altura do módulo ÷ 2. 8. Mínimos: lockup com descritor 120 px; símbolo isolado 16 px. ========================================================================= */ /* ---------------- TOKENS CANÔNICOS — INOVE VISUAL SYSTEM V1 ---------------- */ :root{ --inove-vermelho: #C91119; --inove-vermelho-escuro: #9C0D14; --inove-vermelho-claro: #E84A50; --inove-grafite: #141A1F; --inove-navy: #0B1F33; --inove-navy-medio: #1C3A57; --inove-concreto: #E9ECEF; --inove-cinza: #6B7280; --inove-borda: #E2E5E8; --inove-teal: #2E8FA8; --inove-branco: #FFFFFF; --inove-fonte: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --inove-fonte-dado: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --inove-grade-colunas: 12; --inove-calha: 24px; --inove-traco: 2px; --inove-raio: 0; } /* ---------------- FONTES — IBM Plex, SIL OFL 1.1, hospedadas no domínio ---- Licença em /assets/fontes/LICENSE-IBM-PLEX-OFL-1.1.txt, distribuída junto conforme exige a OFL. Só os quatro pesos aprovados. Sem itálico. */ @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fontes/IBMPlexSans-Regular-Latin1.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; } @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fontes/IBMPlexSans-Medium-Latin1.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; } @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fontes/IBMPlexSans-Bold-Latin1.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fontes/IBMPlexMono-Regular-Latin1.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; } /* ---------------- PAPÉIS SEMÂNTICOS — derivados só dos tokens acima -------- */ :root{ --fundo: var(--inove-branco); --superficie: var(--inove-branco); --superficie-2: var(--inove-concreto); --texto: var(--inove-grafite); --texto-2: var(--inove-cinza); --acento: var(--inove-vermelho); --acento-forte: var(--inove-vermelho-escuro); --borda: var(--inove-borda); --borda-forte: #C7CDD3; --link: var(--inove-navy); --sobre-acento: var(--inove-branco); --grade: rgba(11,31,51,.05); --shell: 1160px; --step-1: 1.0625rem; --step-2: clamp(1.25rem, 2.2vw, 1.5rem); --step-3: clamp(1.5rem, 3vw, 2rem); --step-4: clamp(1.9rem, 4.6vw, 2.9rem); } @media (prefers-color-scheme: dark){ :root{ --fundo: var(--inove-navy); --superficie: var(--inove-navy-medio); --superficie-2: var(--inove-navy-medio); --texto: var(--inove-concreto); --texto-2: #8FA6BB; --acento: var(--inove-vermelho-claro); --acento-forte: var(--inove-vermelho-claro); --borda: var(--inove-navy-medio); --borda-forte: #2C5177; --link: var(--inove-concreto); --sobre-acento: var(--inove-grafite); --grade: rgba(233,236,239,.06); } } *,*::before,*::after{ box-sizing:border-box } [hidden]{ display:none !important } html{ -webkit-text-size-adjust:100% } body{ margin:0; background:var(--fundo); color:var(--texto); font-family:var(--inove-fonte); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto } a{ color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px } /* O hover não pinta o texto de vermelho. Duas razões independentes: a regra 3 do sistema reserva o vermelho para acento e traço, nunca para texto; e no tema escuro o vermelho claro sobre navy mede 4,39:1, abaixo do mínimo AA. A affordance passa para o sublinhado, que não depende de cor. */ a:hover{ text-decoration-thickness:var(--inove-traco); text-underline-offset:2px } :focus-visible{ outline:var(--inove-traco) solid var(--acento); outline-offset:3px } h1,h2,h3{ font-family:var(--inove-fonte); font-weight:700; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; margin:0 0 .5em } h1{ font-size:var(--step-4) } h2{ font-size:var(--step-3) } h3{ font-size:var(--step-1); font-weight:500 } p{ margin:0 0 1em; max-width:70ch } ul,ol{ margin:0 0 1em; padding-left:1.2em } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:20px } .eyebrow{ font-family:var(--inove-fonte-dado); font-weight:400; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2); margin:0 0 1em; } .eyebrow--on-dark{ color:#8FA6BB } .lead{ font-size:var(--step-1); color:var(--texto-2); max-width:62ch } .prose{ max-width:68ch } .prose--tight{ max-width:56ch } .vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 } .skip{ position:absolute; left:-9999px; top:0; background:var(--inove-navy); color:var(--inove-branco); padding:10px 16px; z-index:100; } .skip:focus{ left:0 } /* ------------------------------ LOCKUPS ---------------------------------- Ativos canônicos em SVG. A troca claro/escuro é feita por CSS, sem script. */ .lockup{ display:inline-block; line-height:0 } .lockup img{ display:block; width:auto } .lockup .escuro{ display:none } @media (prefers-color-scheme: dark){ .lockup .claro{ display:none } .lockup .escuro{ display:block } } /* Superfície sempre escura (rodapé): a variante não pode seguir o tema do visitante, senão em tema claro a arte clara cai sobre fundo navy. Declarada depois da media query para vencer por ordem, com a mesma especificidade. */ .lockup--fixo-escuro .claro{ display:none } .lockup--fixo-escuro .escuro{ display:block } /* Alturas iguais aos atributos width/height do HTML, para não deslocar layout. Regra 8 do sistema: lockup com descritor tem no mínimo 120 px de largura — na proporção 339,61 × 120 isso exige altura ≥ 42,4 px. Header usa 44 px. */ .lockup--header img{ height:44px } .lockup--rodape img{ height:36px } .lockup--assinatura img{ height:26px } .lockup--sigcard img{ height:34px } /* ------------------------- MASTERS DE IDENTIDADE --------------------------- CHIEF CORRECTION — FINAL IDENTITY SOURCE (2026-09-23). O logo INOVE CONSTRUTORA é UMA imagem fornecida pela Diretoria (claro: LIGHT_MASTER · escuro: DARK_MASTER). O invólucro tem a proporção do enquadramento do logo (--bm-ratio = altura/largura); a imagem inteira é escalada e posicionada por dentro (regras geradas pelo build no fim de dist/assets/site.css a partir de content.json › site.identity.masters.*.frame; sem style= inline, CSP style-src 'self'). Sem filtro, sem blend, sem distorção. */ .brand-master{ position:relative; display:block; overflow:hidden; line-height:0 } .brand-master::before{ content:""; display:block; padding-top:var(--bm-ratio) } .brand-master img{ position:absolute; display:block; max-width:none; max-height:none } /* cabeçalho legado (/privacidade/ de produção): altura 44 px = a do lockup anterior (o cabeçalho não cresce) */ .lockup--master .brand-master--light{ width:116.77px } .lockup--master .brand-master--dark{ width:132.36px } /* ------------------------------- HEADER ----------------------------------- */ .site-header{ background:var(--fundo); border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:40 } .site-header__inner{ display:flex; align-items:center; gap:16px; min-height:88px; flex-wrap:wrap } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; padding-block:22px } /* área de proteção = módulo ÷ 2 = 22 px */ .nav ul{ display:flex; gap:2px; list-style:none; margin:0; padding:0; flex-wrap:wrap } .nav a{ display:block; padding:10px 13px; text-decoration:none; color:var(--texto); font-family:var(--inove-fonte); font-weight:400; font-size:.95rem; border-radius:var(--inove-raio); } .nav a:hover{ background:var(--superficie-2); color:var(--texto) } .nav a[aria-current="page"]{ font-weight:500; box-shadow:inset 0 calc(var(--inove-traco)*-1) 0 var(--inove-vermelho) } .navtoggle{ display:none; align-items:center; gap:8px; background:none; border:1px solid var(--borda); border-radius:var(--inove-raio); padding:9px 13px; font:inherit; font-family:var(--inove-fonte-dado); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; color:var(--texto); } .navtoggle__bars{ width:18px; height:2px; background:currentColor; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor } @media (max-width:900px){ .navtoggle{ display:inline-flex } .nav{ flex-basis:100%; display:none; padding-bottom:12px } .nav.is-open{ display:block } .nav ul{ flex-direction:column; gap:0 } .nav a{ padding:13px 8px; border-bottom:1px solid var(--borda) } } /* -------------------------------- HERO ------------------------------------ Fundo navy com grade técnica discreta, como no exemplo do sistema V1. O traço vermelho sob o H1 é o único elemento vermelho da tela. */ .hero{ background:var(--inove-navy); color:var(--inove-branco); padding-block:64px 0; background-image:linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size:64px 64px; } .hero h1{ color:var(--inove-branco); max-width:23ch; margin-bottom:0 } .hero h1 + .hero__rule{ width:96px; height:3px; background:var(--inove-vermelho); margin:22px 0 24px; border:0; } .hero__lead{ font-size:var(--step-1); color:#C7D4DE; max-width:60ch } .hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 44px } .hero__media{ border:1px solid rgba(233,236,239,.22); aspect-ratio:16/6; display:grid; place-items:center; margin-bottom:-40px; background:rgba(28,58,87,.45); max-width:100%; } .hero__media .ph{ font-family:var(--inove-fonte-dado); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#8FA6BB; text-align:center; padding:0 16px; } .hero--tecnologia{ background-color:var(--inove-grafite) } @media (max-width:640px){ .hero__media{ aspect-ratio:16/9 } } .pagehead{ padding-block:48px 8px; border-bottom:1px solid var(--borda) } .pagehead--case{ border-bottom:0 } .jump{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:20px 0 26px } .jump a{ display:block; border:1px solid var(--borda-forte); padding:8px 13px; text-decoration:none; font-family:var(--inove-fonte); font-weight:500; font-size:.9rem; color:var(--texto); } .jump a:hover{ border-color:var(--inove-vermelho); color:var(--texto) } /* -------------------------------- BOTÕES ---------------------------------- */ .btn{ display:inline-block; font-family:var(--inove-fonte); font-weight:500; font-size:.86rem; letter-spacing:.09em; text-transform:uppercase; padding:14px 24px; border-radius:var(--inove-raio); text-decoration:none; border:var(--inove-traco) solid transparent; cursor:pointer; } .btn--primary{ background:var(--inove-vermelho); color:var(--inove-branco); border-color:var(--inove-vermelho) } .btn--primary:hover{ background:var(--acento-forte); border-color:var(--acento-forte); color:var(--inove-branco) } .btn--ghost{ border-color:var(--borda-forte); color:var(--texto); background:transparent } .btn--ghost:hover{ border-color:var(--texto); color:var(--texto) } .hero .btn--ghost{ border-color:rgba(233,236,239,.5); color:var(--inove-branco) } .hero .btn--ghost:hover{ border-color:var(--inove-branco); color:var(--inove-branco) } .btn[disabled]{ opacity:.45; cursor:not-allowed } /* --------------------------- FAIXA DE EVIDÊNCIA --------------------------- */ .proof{ background:var(--inove-navy); color:var(--inove-branco); padding-block:72px 32px } .proof__list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; grid-template-columns:repeat(4,1fr) } .proof__list li{ border-top:var(--inove-traco) solid rgba(233,236,239,.3); padding-top:14px } .proof__list strong{ display:block; font-weight:500; font-size:1.05rem; margin-bottom:5px } .proof__list span{ color:#8FA6BB; font-size:.9rem } @media (max-width:900px){ .proof__list{ grid-template-columns:1fr 1fr } } @media (max-width:520px){ .proof__list{ grid-template-columns:1fr } } /* -------------------------------- BANDAS ---------------------------------- */ .band{ padding-block:60px } .band--alt{ background:var(--superficie-2) } .closing{ background:var(--inove-navy); color:var(--inove-branco); padding-block:60px } .closing h2{ color:var(--inove-branco) } .closing .lead{ color:#C7D4DE } .more{ margin-top:26px } /* --------------------------------- GRIDS ---------------------------------- */ .cards{ list-style:none; margin:0; padding:0; display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--borda) } .cards--compact{ grid-template-columns:1fr } .cards--sector{ grid-template-columns:repeat(3,1fr) } .card{ background:var(--fundo); padding:22px } .band--alt .card{ background:var(--fundo) } .card h3{ margin-bottom:.4em } .card p{ margin:0; color:var(--texto-2); font-size:.95rem } .card--sector h3 a{ text-decoration:none; color:var(--texto) } .card--sector h3 a:hover{ text-decoration:underline } @media (max-width:900px){ .cards,.cards--sector{ grid-template-columns:1fr 1fr } } @media (max-width:600px){ .cards,.cards--sector{ grid-template-columns:1fr } } .split{ display:grid; gap:36px; grid-template-columns:1fr 1fr; align-items:start } .split--wide{ grid-template-columns:1.1fr .9fr } .split__title{ font-size:1rem; font-weight:500; padding-bottom:12px; border-bottom:var(--inove-traco) solid var(--inove-grafite); margin-bottom:18px } @media (prefers-color-scheme: dark){ .split__title{ border-bottom-color:var(--inove-concreto) } } @media (max-width:860px){ .split,.split--wide{ grid-template-columns:1fr } } /* ------------------------ CARDS DE ASSINATURA ----------------------------- */ .sigcards{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:20px; grid-template-columns:1fr 1fr } .sigcard{ background:var(--fundo); border:1px solid var(--borda); border-top:var(--inove-traco) solid var(--inove-grafite); padding:26px; display:flex; flex-direction:column; gap:14px; } @media (prefers-color-scheme: dark){ .sigcard{ border-top-color:var(--inove-concreto) } } .sigcard--tecnologia{ border-top-color:var(--inove-teal) } .sigcard__mark{ margin:0 } .sigcard__text{ margin:0; color:var(--texto-2); flex:1 } .sigcard__cta{ margin:0 } @media (max-width:760px){ .sigcards{ grid-template-columns:1fr } } /* -------------------------------- ETAPAS ---------------------------------- */ .steps{ list-style:none; margin:0; padding:0; display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--borda) } .steps li{ background:var(--fundo); padding:20px 22px } .steps__n{ display:block; font-family:var(--inove-fonte-dado); font-size:.78rem; letter-spacing:.1em; color:var(--texto-2); margin-bottom:10px; } .steps h3{ font-size:1rem; margin-bottom:.35em } .steps p{ margin:0; color:var(--texto-2); font-size:.93rem } @media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr } } @media (max-width:560px){ .steps{ grid-template-columns:1fr } } /* --------------------------------- CASES ---------------------------------- */ .cases{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:repeat(3,1fr) } .cases--list{ grid-template-columns:repeat(3,1fr) } .casecard{ background:var(--fundo); border:1px solid var(--borda); padding:22px; display:flex; flex-direction:column; gap:12px; } .casecard--tecnologia{ border-left:3px solid var(--inove-teal) } .casecard--construtora{ border-left:3px solid var(--inove-grafite) } @media (prefers-color-scheme: dark){ .casecard--construtora{ border-left-color:var(--inove-concreto) } } .casecard h3{ font-size:1.05rem; font-weight:500; margin:0 } .casecard h3 a{ text-decoration:none; color:var(--texto) } .casecard h3 a:hover{ text-decoration:underline } .casecard__meta{ display:flex; flex-wrap:wrap; gap:6px; margin:0 } .casecard__status{ margin:0; font-family:var(--inove-fonte-dado); font-size:.76rem; color:var(--texto-2) } @media (max-width:900px){ .cases,.cases--list{ grid-template-columns:1fr 1fr } } @media (max-width:620px){ .cases,.cases--list{ grid-template-columns:1fr } } .facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px } .facts li{ font-size:.92rem; color:var(--texto-2); padding-left:15px; position:relative } .facts li::before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:1px; background:var(--texto-2) } .facts--lg{ flex-direction:row; flex-wrap:wrap; gap:8px 30px; margin-top:16px } .facts--lg li{ font-size:1rem; color:var(--texto) } .chip{ display:inline-block; font-family:var(--inove-fonte-dado); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:var(--inove-raio); background:var(--superficie-2); color:var(--texto); } .chip--construtora{ border:1px solid var(--borda-forte) } .chip--tecnologia{ border:1px solid var(--inove-teal) } /* teal só como borda */ .chip--status{ background:var(--inove-grafite); color:var(--inove-branco) } @media (prefers-color-scheme: dark){ .chip--status{ background:var(--inove-concreto); color:var(--inove-grafite) } } .casemeta{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px } /* -------------------------------- FILTROS --------------------------------- */ .filters{ display:flex; flex-wrap:wrap; gap:26px; margin-bottom:18px } .filters fieldset{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center } .filters legend{ font-family:var(--inove-fonte-dado); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-2); float:left; width:100%; margin-bottom:7px; } .fbtn{ font:inherit; font-size:.88rem; font-family:var(--inove-fonte); font-weight:400; background:var(--fundo); border:1px solid var(--borda-forte); border-radius:var(--inove-raio); padding:8px 13px; cursor:pointer; color:var(--texto); } .fbtn:hover{ border-color:var(--texto) } .fbtn.is-on{ background:var(--inove-grafite); border-color:var(--inove-grafite); color:var(--inove-branco); font-weight:500 } @media (prefers-color-scheme: dark){ .fbtn.is-on{ background:var(--inove-concreto); border-color:var(--inove-concreto); color:var(--inove-grafite) } } .filters__status{ font-family:var(--inove-fonte-dado); font-size:.8rem; color:var(--texto-2); margin:0 0 20px } .cases__empty{ color:var(--texto-2) } @media (max-width:700px){ .filters{ flex-direction:column; gap:16px } } /* -------------------------------- SETORES --------------------------------- */ .sector__problem{ max-width:68ch; color:var(--texto-2) } .sector__split{ display:grid; gap:20px; grid-template-columns:1fr 1fr; margin:24px 0 } .sector__side{ background:var(--fundo); border:1px solid var(--borda); border-left:3px solid var(--inove-grafite); padding:20px 22px } @media (prefers-color-scheme: dark){ .sector__side{ border-left-color:var(--inove-concreto) } } .sector__side--tecnologia{ border-left-color:var(--inove-teal) } .sector__side h3{ margin-bottom:.6em } .sector__side p{ margin:0; color:var(--texto-2); font-size:.95rem } @media (max-width:760px){ .sector__split{ grid-template-columns:1fr } } .evidence{ border-top:var(--inove-traco) solid var(--borda-forte); padding-top:20px } .evidence h3{ font-family:var(--inove-fonte-dado); font-size:.74rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-2) } .evidence p{ max-width:70ch } .evidence__extra{ color:var(--texto-2); font-size:.94rem } /* ----------------------------- LINHA DO TEMPO ----------------------------- */ .timeline{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:20px; grid-template-columns:repeat(5,1fr) } .timeline li{ border-top:var(--inove-traco) solid var(--borda-forte); padding-top:14px } .timeline__year{ font-family:var(--inove-fonte-dado); font-size:.85rem; color:var(--texto-2); display:block; margin-bottom:6px } .timeline h3{ font-size:.98rem } .timeline p{ margin:0; color:var(--texto-2); font-size:.92rem } @media (max-width:1000px){ .timeline{ grid-template-columns:repeat(3,1fr) } } @media (max-width:700px){ .timeline{ grid-template-columns:1fr } } /* ----------------------------------- UFs ---------------------------------- */ .ufs{ list-style:none; margin:0; padding:0; display:grid; gap:1px; grid-template-columns:repeat(4,1fr); background:var(--borda) } .ufs li{ background:var(--fundo); padding:18px 20px } .ufs strong{ font-family:var(--inove-fonte-dado); font-size:1.5rem; color:var(--texto); display:block; line-height:1 } .ufs span{ display:block; font-weight:500; margin:8px 0 3px } .ufs em{ font-style:normal; color:var(--texto-2); font-size:.89rem } @media (max-width:860px){ .ufs{ grid-template-columns:1fr 1fr } } @media (max-width:520px){ .ufs{ grid-template-columns:1fr } } /* --------------------------------- VOLUMES -------------------------------- */ .volumes{ margin:0 0 1.4em; display:grid; gap:14px; grid-template-columns:repeat(3,1fr) } .volumes--wide{ grid-template-columns:repeat(2,1fr) } .volumes > div{ border-top:1px solid var(--borda-forte); padding-top:12px } .volumes dt{ font-family:var(--inove-fonte-dado); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-2) } .volumes dd{ margin:4px 0 0; font-family:var(--inove-fonte-dado); font-size:1.1rem; color:var(--texto) } .volumes--wide dd{ font-family:var(--inove-fonte); font-size:1rem; font-weight:500 } @media (max-width:760px){ .volumes,.volumes--wide{ grid-template-columns:1fr 1fr } } @media (max-width:480px){ .volumes,.volumes--wide{ grid-template-columns:1fr } } .tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 1.4em } .tags li{ border:1px solid var(--borda-forte); padding:5px 11px; font-size:.87rem; color:var(--texto-2); background:var(--fundo); } /* -------------------------------- DIAGRAMAS ------------------------------- */ .diagram{ margin:0 } .diagram__box{ border:1px solid var(--borda-forte); background:var(--fundo); padding:22px } .diagram__title{ font-family:var(--inove-fonte); font-weight:500; font-size:.94rem; margin:0 0 16px } .diagram__row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px } .diagram__row span{ flex:1 1 120px; background:var(--superficie-2); border:1px solid var(--borda-forte); padding:13px 10px; text-align:center; font-size:.84rem; color:var(--texto); font-family:var(--inove-fonte); font-weight:400; } .diagram__row:first-of-type span{ border-color:var(--inove-teal) } /* teal só como borda de diagrama */ .diagram figcaption{ font-family:var(--inove-fonte-dado); font-size:.76rem; color:var(--texto-2); margin-top:10px } /* --------------------------------- GALERIA -------------------------------- */ .gallery{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) } .gallery figure{ margin:0 } .gallery figcaption{ font-size:.85rem; color:var(--texto-2); margin-top:6px } /* ---------------------------------- AVISOS -------------------------------- */ .notice{ border:1px solid var(--borda); border-left:3px solid var(--texto-2); padding:18px 20px; background:var(--fundo); margin:0 0 18px } .notice--restrict{ border-left-color:var(--inove-grafite) } @media (prefers-color-scheme: dark){ .notice--restrict{ border-left-color:var(--inove-concreto) } } .notice--blocked{ border-left-color:var(--acento) } .notice--staging{ border-left-color:var(--acento); background:var(--superficie-2) } .notice--editorial{ border-left-color:var(--inove-teal); background:var(--superficie-2) } .notice__label{ font-family:var(--inove-fonte-dado); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-2); margin:0 0 10px; } .notice__body p:last-child,.notice__body ul:last-child{ margin-bottom:0 } .notice__body,.notice__body li{ font-size:.93rem; color:var(--texto-2) } .notice__meta{ font-size:.83rem; color:var(--texto-2) } /* ------------------------------ BREADCRUMBS ------------------------------- */ .crumbs{ padding-block:16px 0 } .crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; font-family:var(--inove-fonte-dado); font-size:.76rem; color:var(--texto-2) } .crumbs li + li::before{ content:"/"; margin-right:6px; color:var(--texto-2) } .crumbs a{ color:var(--texto-2) } /* ------------------------------- FORMULÁRIO ------------------------------- */ .contact{ display:grid; gap:44px; grid-template-columns:1.25fr .75fr; align-items:start } @media (max-width:860px){ .contact{ grid-template-columns:1fr } } .field{ margin-bottom:20px } .field label{ display:block; font-family:var(--inove-fonte); font-weight:500; font-size:.93rem; margin-bottom:7px } .field input,.field select,.field textarea{ width:100%; font:inherit; font-family:var(--inove-fonte); font-size:1rem; padding:12px 13px; color:var(--texto); background:var(--fundo); border:1px solid var(--borda-forte); border-radius:var(--inove-raio); } .field textarea{ resize:vertical } .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ border-color:var(--acento) } .field--check{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start } .field--check label{ margin:0; font-weight:400; font-size:.93rem } .field--check input{ width:20px; height:20px; margin-top:3px } .field--check .err{ grid-column:1 / -1 } /* Erro de campo: o vermelho fica no traço, não na letra. No tema escuro o vermelho claro sobre navy media 4,39:1 e reprovava AA — além de contrariar a regra 3 do sistema. O aviso continua distinguível sem depender de cor: tem o "!" na frente e a barra à esquerda. */ .err{ color:var(--texto); font-size:.87rem; margin:7px 0 0; border-left:var(--inove-traco) solid var(--acento); padding-left:8px; } .err::before{ content:"! "; font-family:var(--inove-fonte-dado) } .field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:var(--acento); border-width:var(--inove-traco) } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } .formstatus{ margin-top:12px; font-weight:500 } .formstatus.is-ok{ color:var(--texto) } .formstatus.is-err{ color:var(--texto); border-left:var(--inove-traco) solid var(--acento); padding-left:8px; } .contact__side h2{ font-size:1.05rem } .channels{ list-style:none; margin:0 0 26px; padding:0 } .channels li{ border-top:1px solid var(--borda-forte); padding:13px 0 } .channels a{ font-family:var(--inove-fonte); font-weight:500; font-size:1.05rem; display:block } .channels span{ font-family:var(--inove-fonte-dado); color:var(--texto-2); font-size:.76rem } .addr{ color:var(--texto-2) } .mapslot{ border:1px solid var(--borda-forte); padding:20px; background:var(--superficie-2) } .mapslot p{ font-size:.9rem; color:var(--texto-2) } .mapslot__note{ font-family:var(--inove-fonte-dado); color:var(--texto-2); font-size:.76rem; margin:10px 0 0 } /* --------------------------------- RODAPÉ --------------------------------- */ .site-footer{ background:var(--inove-navy); color:var(--inove-concreto); padding-block:52px 30px } .site-footer__top{ display:grid; gap:40px; grid-template-columns:1fr 2fr } /* Slogan institucional. Um componente, dois lugares, a mesma frase — nunca arte de marca: é texto selecionável, herda a fonte do sistema e escala com o corpo. Se um dia virar imagem, o gate MARCA-4 reprova. */ .slogan{ font-family:var(--inove-fonte-dado); letter-spacing:.06em; margin:0; } .slogan--rodape{ color:#8FA6BB; margin:16px 0 20px; font-size:.8rem } /* Grafite, não vermelho: a regra 3 do sistema proíbe o vermelho como cor de texto, e o papel --acento resolve para vermelho. O alias esconde a regra — por isso o QA passou a resolver papéis antes de julgar. */ .slogan--institucional{ color:var(--texto); font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px; } .site-footer__sigs{ display:flex; flex-direction:column; gap:12px; margin:0 } .site-footer__cols{ display:grid; gap:26px; grid-template-columns:repeat(3,1fr) } .site-footer h2{ font-family:var(--inove-fonte-dado); font-size:.72rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:#8FA6BB; margin-bottom:1em } .site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.93rem } .site-footer a{ color:var(--inove-concreto); text-decoration:none } .site-footer a:hover{ color:var(--inove-branco); text-decoration:underline } .site-footer a:focus-visible{ outline-color:var(--inove-branco) } .site-footer__legal{ border-top:1px solid rgba(233,236,239,.18); margin-top:38px; padding-top:20px; font-size:.83rem; color:#8FA6BB; display:flex; flex-wrap:wrap; gap:6px 26px; } .site-footer__legal p{ margin:0 } .site-footer__legal a{ color:#B7CBDA } .site-footer__legal em{ color:#8FA6BB; font-style:normal } @media (max-width:860px){ .site-footer__top{ grid-template-columns:1fr } .site-footer__cols{ grid-template-columns:1fr 1fr } } @media (max-width:520px){ .site-footer__cols{ grid-template-columns:1fr } } /* ----------------------------- CTA MOBILE --------------------------------- SITE-PROD-01D T-4C A-3 (FIRST_VIEWPORT_OPENERS.md §3): position:sticky dentro do wrapper [data-stickycta-host] (build.js), nunca position:fixed no — a barra gruda só enquanto o wrapper está em tela e desaparece sozinha antes do rodapé/CTA final; o último bloco do wrapper ganha padding-bottom (abaixo) em vez do antigo padding fixo em body.has-stickycta. */ /* SITE-PROD-01D T-4C rev 2 (OPERATOR_REWORK_T-4C_R2.md F-3, cycle 2 LAST): /tecnologia/ had no next-action control in the first viewport at 768 — the sticky bar (text, markup, position:sticky, bottom:0, same "Solicitar levantamento técnico" label/href) already existed at 430/390/360 (max-width:760px) but 768 fell 1px short of its 760px cutoff. Raising the threshold to 768px is the fix the audit itself proposed ("extend the sticky bar rule to 768") and leaves the already re-verified 430/390/360 collision fix (§12A) byte-for-byte unchanged — only the breakpoint number moves. */ .stickycta{ display:none } @media (max-width:768px){ .stickycta{ position:sticky; bottom:0; z-index:50; background:var(--fundo); border-top:1px solid var(--borda-forte); padding:10px 16px; display:flex; justify-content:center; } .stickycta .btn{ width:100%; text-align:center } [data-stickycta-host] > *:last-child{ padding-bottom:calc(var(--sticky-cta-h, 56px) + 16px) } } /* SITE-PROD-01D T-4D F-1 (ledger #137): .pg-inove a{color:var(--i-ink)} (inove.css:27, specificity 0,1,1) overrode .btn--primary{color:#fff} (above, specificity 0,1,0) on the sticky bar's (site.js:136) — label rendered ~3.0:1 on the red (#141A1F on #C91119), below WCAG 1.4.3 AA 4.5:1. Scoped to .stickycta .btn (specificity 0,2,0) so it always wins over .pg-inove a regardless of sheet order, without touching .btn--red/.btn--ink/.btn--outline-light or the other .btn--primary (the /contato/ submit