/* ========================================================= METODOLOGIA — TESTE DA NOVA CAMADA VISUAL ========================================================= */ body.pagina-metodologia { background: #ffffff !important; } /* CABEÇALHO */ body.pagina-metodologia .cabecalho-site { background: #ffffff !important; border-top: 4px solid #00ffff !important; border-bottom: 1px solid #dddddd !important; } body.pagina-metodologia .cabecalho-conteudo { width: min(1280px, calc(100% - 48px)) !important; min-height: 84px !important; padding: 12px 0 !important; } /* LOGO */ body.pagina-metodologia .marca-logo-galeria { display: block !important; width: 110px !important; max-width: 110px !important; height: auto !important; } body.pagina-metodologia .marca-site-galeria { display: flex !important; align-items: center !important; gap: 14px !important; text-decoration: none !important; } /* NOME DA PLATAFORMA */ body.pagina-metodologia .marca-plataforma { display: flex !important; flex-direction: column !important; } body.pagina-metodologia .marca-plataforma small { color: #666666 !important; font-family: "Big Shoulders Display", sans-serif !important; font-size: 9px !important; font-weight: 900 !important; } body.pagina-metodologia .marca-plataforma strong { color: #000000 !important; font-family: "Big Shoulders Display", sans-serif !important; font-size: 21px !important; font-weight: 900 !important; } /* MENU */ body.pagina-metodologia .menu-principal { overflow: hidden !important; background: #ffffff !important; border: 1px solid #d9d9d9 !important; border-top: 4px solid #00ffff !important; border-radius: 12px !important; } body.pagina-metodologia .menu-principal a { color: #000000 !important; background: transparent !important; border-radius: 0 !important; } body.pagina-metodologia .menu-principal a[aria-current="page"] { color: #000000 !important; background: #ffff00 !important; } /* HERO */ body.pagina-metodologia .hero-metodologia { color: #ffffff !important; background: #000000 !important; border-bottom: 7px solid #00ffff !important; } body.pagina-metodologia .hero-metodologia h1 { color: #ffffff !important; } body.pagina-metodologia .hero-metodologia h1 span { color: #00ffff !important; } body.pagina-metodologia .hero-etiqueta { color: #ffff00 !important; background: transparent !important; border: 0 !important; } /* REMOVE OS CÍRCULOS MARRONS DO HERO */ body.pagina-metodologia .hero-metodologia::before, body.pagina-metodologia .hero-metodologia::after { display: none !important; } /* ========================================================= 04 // ESTRUTURA DA METODOLOGIA ========================================================= */ body.pagina-metodologia .estrutura-metodologia { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 110px; background: #ffffff; } body.pagina-metodologia .conteudo-metodologia { min-width: 0; width: 100%; max-width: 880px; } /* ========================================================= 05 // ÍNDICE DESKTOP ========================================================= */ body.pagina-metodologia .sumario-metodologia { position: sticky; top: 24px; align-self: start; width: 100%; max-height: calc(100vh - 48px); padding: 0; overflow-y: auto; color: #ffffff; background: #000000; border: 0; border-top: 5px solid #00ffff; border-radius: 0; box-shadow: 6px 6px 0 #ffff00; scrollbar-width: thin; scrollbar-color: #00ffff #111111; } body.pagina-metodologia .sumario-kicker { display: block; padding: 20px 18px 0; margin: 0 0 7px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } body.pagina-metodologia .sumario-metodologia > h2 { margin: 0; padding: 0 18px 20px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 31px; font-weight: 900; line-height: .90; border-bottom: 1px solid rgba(255,255,255,.15); } body.pagina-metodologia .sumario-lista { margin: 0; padding: 0; list-style: none; } body.pagina-metodologia .sumario-lista li { margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,.12); } body.pagina-metodologia .sumario-lista a { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; align-items: start; width: 100%; padding: 12px 14px; color: #ffffff; background: transparent; text-decoration: none; transition: background-color .18s ease, color .18s ease, padding-left .18s ease; } body.pagina-metodologia .sumario-numero { color: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; line-height: 1.1; } body.pagina-metodologia .sumario-texto { display: block; min-width: 0; } body.pagina-metodologia .sumario-texto strong { display: block; color: inherit; font-family: var(--gp-fonte-titulo); font-size: 13px; font-weight: 900; line-height: 1; } body.pagina-metodologia .sumario-texto small { display: block; margin-top: 4px; color: rgba(255,255,255,.55); font-family: var(--gp-fonte-texto); font-size: 10px; line-height: 1.3; } body.pagina-metodologia .sumario-lista a:hover, body.pagina-metodologia .sumario-lista a:focus-visible { color: #000000; background: #00ffff; padding-left: 18px; outline: none; } body.pagina-metodologia .sumario-lista a:hover .sumario-numero, body.pagina-metodologia .sumario-lista a:hover .sumario-texto small, body.pagina-metodologia .sumario-lista a:focus-visible .sumario-numero, body.pagina-metodologia .sumario-lista a:focus-visible .sumario-texto small { color: #000000; } body.pagina-metodologia .sumario-ficha { display: flex; align-items: center; gap: 8px; margin: 14px; padding: 10px 11px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; background: #ffff00; border: 1px solid #000000; } body.pagina-metodologia .sumario-ficha span { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; color: #000000; background: #00ffff; border: 1px solid #000000; font-size: 17px; } /* ========================================================= 06 // ESTRUTURA DAS SEÇÕES ========================================================= */ body.pagina-metodologia .metodo-secao { position: relative; margin: 0 0 86px; padding: 0 0 76px; scroll-margin-top: 32px; border-bottom: 1px solid #dddddd; } body.pagina-metodologia .metodo-secao:last-of-type { margin-bottom: 0; } body.pagina-metodologia .metodo-cabecalho { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 18px; align-items: start; margin: 0 0 27px; padding: 0 0 22px; border-bottom: 1px solid #d8d8d8; } body.pagina-metodologia .metodo-numero { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 21px; font-weight: 900; line-height: 1; background: #ffff00; border: 1px solid #000000; box-shadow: 4px 4px 0 #000000; } body.pagina-metodologia .metodo-kicker { display: block; margin-bottom: 7px; color: #666666; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1px; } body.pagina-metodologia .metodo-titulo h2 { max-width: 730px; margin: 0; color: #000000; font-family: var(--gp-fonte-titulo); font-size: clamp( 44px, 4.2vw, 58px ); font-weight: 900; line-height: .92; letter-spacing: -.5px; } body.pagina-metodologia .metodo-introducao { max-width: 760px; margin: 0 0 30px; } body.pagina-metodologia .metodo-introducao p { margin: 0 0 16px; color: #333333; font-family: var(--gp-fonte-texto); font-size: 18px; line-height: 1.72; } body.pagina-metodologia .metodo-introducao strong { color: #000000; font-weight: 700; } body.pagina-metodologia .bloco-metodologia.metodo-secao { background: transparent; border: 0; border-radius: 0; box-shadow: none; } body.pagina-metodologia .sumario-mobile { display: none; } @media (max-width: 980px) { body.pagina-metodologia .estrutura-metodologia { display: block; width: min( 780px, calc(100% - 32px) ); padding: 40px 0 80px; } body.pagina-metodologia .sumario-metodologia { display: none; } body.pagina-metodologia .sumario-mobile { display: block; margin: 0 0 46px; overflow: hidden; color: #ffffff; background: #000000; border: 0; border-top: 5px solid #00ffff; border-radius: 0; box-shadow: 5px 5px 0 #ffff00; } } @media (max-width: 980px) { body.pagina-metodologia .sumario-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 18px; color: #ffffff; font-family: var(--gp-fonte-titulo); cursor: pointer; list-style: none; } body.pagina-metodologia .sumario-mobile summary::-webkit-details-marker { display: none; } body.pagina-metodologia .sumario-mobile summary span { color: #00ffff; font-size: 11px; font-weight: 900; letter-spacing: .8px; } body.pagina-metodologia .sumario-mobile summary strong { padding: 6px 8px; color: #000000; font-size: 10px; background: #ffff00; } } @media (max-width: 980px) { body.pagina-metodologia .sumario-mobile ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.15); } body.pagina-metodologia .sumario-mobile li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.12); } body.pagina-metodologia .sumario-mobile a { display: grid; grid-template-columns: 35px minmax(0,1fr); padding: 13px 16px; color: #ffffff; text-decoration: none; } body.pagina-metodologia .sumario-mobile a > span { grid-row: 1 / span 2; color: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; } body.pagina-metodologia .sumario-mobile a strong { color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 14px; font-weight: 900; } body.pagina-metodologia .sumario-mobile a small { margin-top: 3px; color: rgba(255,255,255,.55); font-family: var(--gp-fonte-texto); font-size: 11px; line-height: 1.25; } } @media (max-width: 720px) { body.pagina-metodologia .metodo-secao { margin-bottom: 60px; padding-bottom: 54px; } body.pagina-metodologia .metodo-cabecalho { grid-template-columns: 48px minmax(0,1fr); gap: 13px; margin-bottom: 22px; padding-bottom: 18px; } body.pagina-metodologia .metodo-numero { width: 48px; height: 48px; font-size: 17px; box-shadow: 3px 3px 0 #000000; } body.pagina-metodologia .metodo-titulo h2 { font-size: clamp( 35px, 10vw, 44px ); line-height: .94; } body.pagina-metodologia .metodo-introducao p { font-size: 16.5px; line-height: 1.65; } } /* ========================================================= 08F.2 — AJUSTES FINOS GLOBAIS ========================================================= */ /* ÍNDICE NÃO ENTRA ATRÁS DO CABEÇALHO */ body.pagina-metodologia .sumario-metodologia { top: 108px; max-height: calc(100vh - 132px); } /* ÂNCORAS NÃO FICAM ESCONDIDAS */ body.pagina-metodologia .sumario-metodologia { top: 108px; max-height: calc(100vh - 132px); } /* CTA PRINCIPAL — REMOVE LARANJA ANTIGO */ body.pagina-metodologia .botao-primario { color: #000000 !important; background: #00ffff !important; border: 1px solid #000000 !important; box-shadow: 4px 4px 0 #ffff00; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; } body.pagina-metodologia .botao-primario:hover { background: #ffff00 !important; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #00ffff; } body.pagina-metodologia .botao-secundario { color: #ffffff !important; background: transparent !important; border: 1px solid #ffffff !important; } body.pagina-metodologia .botao-secundario:hover { color: #000000 !important; background: #ffff00 !important; border-color: #ffff00 !important; } /* ========================================================= 07 // 01 PRINCÍPIO ========================================================= */ body.pagina-metodologia .principio-frase { position: relative; margin: 30px 0; padding: 30px 32px; overflow: hidden; color: #ffffff; background: #000000; border: 0; border-top: 6px solid #00ffff; } body.pagina-metodologia .principio-frase::after { content: ""; position: absolute; right: -42px; bottom: -42px; width: 110px; height: 110px; background: #ff00ff; transform: rotate(45deg); opacity: .9; } body.pagina-metodologia .principio-frase > span { position: relative; z-index: 2; display: block; margin-bottom: 12px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia .principio-frase > strong { position: relative; z-index: 2; display: block; max-width: 700px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: clamp( 30px, 3.6vw, 43px ); font-weight: 800; line-height: 1.02; } body.pagina-metodologia .principio-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 28px; } body.pagina-metodologia .principio-card { position: relative; min-height: 185px; padding: 20px 18px 18px; background: #f6f6f6; border: 1px solid #d8d8d8; border-top: 5px solid #ff00ff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.pagina-metodologia .principio-card:hover { transform: translateY(-3px); border-color: #000000; box-shadow: 5px 5px 0 #00ffff; } body.pagina-metodologia .principio-indice { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #000000; background: #ffff00; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; } body.pagina-metodologia .principio-card h3 { margin: 18px 0 8px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 28px; font-weight: 900; line-height: 1; } body.pagina-metodologia .principio-card p { margin: 0; color: #444444; font-size: 14px; line-height: 1.55; } body.pagina-metodologia .metodo-nota { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; align-items: start; margin-top: 22px; padding: 18px; background: #f5f5f5; border: 1px solid #dddddd; border-left: 5px solid #ff00ff; } body.pagina-metodologia .metodo-nota-sinal { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #000000; background: #00ffff; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 22px; font-weight: 900; } body.pagina-metodologia .metodo-nota p { margin: 0; color: #333333; font-size: 15px; line-height: 1.6; } /* ========================================================= 08 // 02 FLUXO METODOLÓGICO ========================================================= */ body.pagina-metodologia .fluxo-metodologico { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 32px 0 18px; } body.pagina-metodologia .fluxo-etapa { position: relative; min-height: 185px; padding: 18px; overflow: hidden; background: #ffffff; border: 1px solid #d8d8d8; border-top: 5px solid #00ffff; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } body.pagina-metodologia .fluxo-etapa:hover { transform: translateY(-3px); background: #f4ffff; box-shadow: 4px 4px 0 #000000; } body.pagina-metodologia .fluxo-numero { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 7px; color: #000000; background: #ffff00; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; } body.pagina-metodologia .fluxo-tipo { display: block; margin-top: 20px; color: #777777; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: .9px; } body.pagina-metodologia .fluxo-etapa h3 { margin: 5px 0 9px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 26px; font-weight: 900; line-height: 1; } body.pagina-metodologia .fluxo-etapa p { margin: 0; color: #444444; font-size: 13px; line-height: 1.5; } body.pagina-metodologia .fluxo-continuo { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 15px 17px; color: #ffffff; background: #000000; border-left: 5px solid #00ffff; } body.pagina-metodologia .fluxo-continuo span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; padding: 4px; color: #000000; background: #ffff00; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; } body.pagina-metodologia .fluxo-continuo strong { color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; letter-spacing: .5px; } body.pagina-metodologia .fluxo-continuo i { color: #00ffff; font-style: normal; } /* ========================================================= 09 // 03 BANCO DE DADOS ========================================================= */ body.pagina-metodologia .banco-interface { margin: 30px 0 20px; overflow: hidden; background: #f4f4f4; border: 1px solid #d5d5d5; border-top: 6px solid #00ffff; } body.pagina-metodologia .banco-topo { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; color: #ffffff; background: #000000; } body.pagina-metodologia .banco-topo > div > span { color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia .banco-topo h3 { margin: 5px 0 0; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 31px; font-weight: 900; line-height: 1; } body.pagina-metodologia .banco-status { flex-shrink: 0; padding: 7px 10px; color: #000000 !important; background: #ffff00; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: .5px; } body.pagina-metodologia .banco-grupos { display: grid; grid-template-columns: 1fr; } body.pagina-metodologia .banco-grupo { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; align-items: center; padding: 15px 18px; background: #ffffff; border-bottom: 1px solid #dddddd; transition: background-color .16s ease; } body.pagina-metodologia .banco-grupo:hover { background: rgba(0,255,255,.08); } body.pagina-metodologia .banco-grupo:last-child { border-bottom: 0; } body.pagina-metodologia .banco-grupo-numero { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #000000; background: #ffff00; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; } body.pagina-metodologia .banco-grupo small { display: block; color: #666666; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: .8px; } body.pagina-metodologia .banco-grupo p { margin: 4px 0 0; color: #222222; font-size: 15px; line-height: 1.4; } body.pagina-metodologia .tecnologia-bloco { margin-top: 18px; padding: 19px; background: #000000; border-left: 6px solid #ff00ff; } body.pagina-metodologia .tecnologia-kicker { display: block; margin-bottom: 13px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia .tecnologia-itens { display: flex; flex-wrap: wrap; gap: 7px; } body.pagina-metodologia .tecnologia-itens span { padding: 7px 10px; color: #000000; background: #00ffff; border: 1px solid #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; letter-spacing: .4px; transition: background-color .16s ease, border-color .16s ease; } body.pagina-metodologia .tecnologia-itens span:hover { background: #ffff00; border-color: #000000; } /* ========================================================= 08F.2 — MOBILE / COMPONENTES 01–03 ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia .principio-grade { grid-template-columns: 1fr; } body.pagina-metodologia .principio-card { min-height: 0; } body.pagina-metodologia .principio-frase { padding: 24px 22px; } body.pagina-metodologia .principio-frase > strong { font-size: 30px; } body.pagina-metodologia .fluxo-metodologico { grid-template-columns: repeat(2, minmax(0,1fr)); } body.pagina-metodologia .fluxo-etapa { min-height: 170px; } body.pagina-metodologia .banco-topo { flex-direction: column; align-items: flex-start; } } @media (max-width: 430px) { body.pagina-metodologia .fluxo-metodologico { grid-template-columns: 1fr; } body.pagina-metodologia .fluxo-etapa { min-height: 0; } body.pagina-metodologia .banco-grupo { grid-template-columns: 44px minmax(0,1fr); padding: 13px; } } /* ========================================================= 08F.2 — 02 // FLUXO METODOLÓGICO PIPELINE DE CONSTRUÇÃO DO ACERVO ========================================================= */ body.pagina-metodologia #secao-2 .fluxo-metodologico { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; margin: 34px 0 22px; padding: 22px 0; } body.pagina-metodologia #secao-2 .fluxo-metodologico::before { content: ""; position: absolute; top: 57px; left: 5%; right: 5%; height: 2px; background: repeating-linear-gradient( 90deg, #00ffff 0, #00ffff 14px, transparent 14px, transparent 21px ); opacity: .55; pointer-events: none; } body.pagina-metodologia #secao-2 .fluxo-etapa { position: relative; z-index: 2; min-height: 205px; padding: 18px; overflow: hidden; background: #ffffff; border: 1px solid #d8d8d8; border-top: 5px solid #00ffff; box-shadow: 3px 3px 0 #eeeeee; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } body.pagina-metodologia #secao-2 .fluxo-etapa::before { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: linear-gradient( 135deg, transparent 50%, #00ffff 50% ); } body.pagina-metodologia #secao-2 .fluxo-etapa:hover { transform: translateY(-4px); background: #f8ffff; border-color: #000000; box-shadow: 5px 5px 0 #00ffff; } body.pagina-metodologia #secao-2 .fluxo-numero { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 12px; font-weight: 900; line-height: 1; } body.pagina-metodologia #secao-2 .fluxo-tipo { display: block; margin-top: 24px; color: #777777; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1.2px; } body.pagina-metodologia #secao-2 .fluxo-etapa h3 { margin: 6px 0 11px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 30px; font-weight: 900; line-height: .95; } body.pagina-metodologia #secao-2 .fluxo-etapa p { margin: 0; color: #444444; font-family: var(--gp-fonte-texto); font-size: 13.5px; line-height: 1.52; } body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(1), body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(2) { border-top-color: #00ffff; } body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(3), body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(4) { border-top-color: #ff00ff; } body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(5), body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(6) { border-top-color: #ffff00; } body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(7), body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(8) { border-top-color: #000000; } body.pagina-metodologia #secao-2 .fluxo-etapa:not(:nth-child(4)):not(:nth-child(8))::after { content: "→"; position: absolute; top: 16px; right: -12px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #000000; background: #00ffff; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 16px; font-weight: 900; } body.pagina-metodologia #secao-2 .fluxo-etapa:nth-child(5)::before { content: "FASE 02"; position: absolute; top: 0; right: 0; width: auto; height: auto; padding: 4px 6px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .5px; } body.pagina-metodologia #secao-2 .fluxo-continuo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; padding: 17px 19px; overflow: hidden; color: #ffffff; background: #000000; border: 0; border-left: 6px solid #00ffff; } body.pagina-metodologia #secao-2 .fluxo-continuo span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; color: #000000; background: #ffff00; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; } body.pagina-metodologia #secao-2 .fluxo-continuo strong { color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 12px; font-weight: 900; letter-spacing: .6px; } body.pagina-metodologia #secao-2 .fluxo-continuo i { color: #00ffff; font-style: normal; font-size: 16px; } body.pagina-metodologia #secao-2 .fluxo-continuo::after { content: "PROCESSO ITERATIVO // REVISÃO CONTÍNUA"; margin-left: auto; color: rgba(255,255,255,.45); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .8px; } @media (max-width: 720px) { body.pagina-metodologia #secao-2 .fluxo-metodologico { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 12px 0; } body.pagina-metodologia #secao-2 .fluxo-metodologico::before { display: none; } body.pagina-metodologia #secao-2 .fluxo-etapa { min-height: 190px; } body.pagina-metodologia #secao-2 .fluxo-etapa::after { display: none !important; } body.pagina-metodologia #secao-2 .fluxo-continuo::after { width: 100%; margin: 5px 0 0; } } @media (max-width: 430px) { body.pagina-metodologia #secao-2 .fluxo-metodologico { grid-template-columns: 1fr; } body.pagina-metodologia #secao-2 .fluxo-etapa { min-height: 0; } } /* ========================================================= AJUSTE FINAL — NAVEGAÇÃO + PIPELINE 02 ========================================================= */ /* Âncoras abaixo do cabeçalho fixo */ body.pagina-metodologia .metodo-secao { scroll-margin-top: 155px; } /* Permite que as setas do pipeline apareçam inteiras */ body.pagina-metodologia #secao-2 .fluxo-etapa { overflow: visible; } /* ========================================================= 09F — 03 // BANCO DE DADOS ARQUITETURA VISUAL DO REGISTRO ========================================================= */ /* ========================================================= 1. CONTAINER PRINCIPAL ========================================================= */ body.pagina-metodologia #secao-3 .banco-interface { position: relative; margin: 34px 0 22px; overflow: hidden; background: #ffffff; border: 1px solid #000000; border-top: 6px solid #00ffff; box-shadow: 5px 5px 0 #eeeeee; } /* pequeno identificador técnico */ body.pagina-metodologia #secao-3 .banco-interface::before { content: "SCHEMA // MEMORIAS_PEQUENA_AFRICA"; position: absolute; z-index: 4; top: 0; right: 0; padding: 5px 8px; color: #000000; background: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: .7px; } /* ========================================================= 2. CABEÇALHO DO "REGISTRO" ========================================================= */ body.pagina-metodologia #secao-3 .banco-topo { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 22px 22px; color: #ffffff; background: #000000; border-bottom: 1px solid #333333; } body.pagina-metodologia #secao-3 .banco-topo > div > span { color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1.2px; } body.pagina-metodologia #secao-3 .banco-topo h3 { margin: 7px 0 0; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 36px; font-weight: 900; line-height: .95; } /* ========================================================= 3. STATUS ========================================================= */ body.pagina-metodologia #secao-3 .banco-status { position: relative; flex-shrink: 0; padding: 8px 11px; color: #000000 !important; background: #ffff00; border: 1px solid #ffffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .7px; box-shadow: 3px 3px 0 #00ffff; } /* ========================================================= 4. GRID DOS GRUPOS DE DADOS ========================================================= */ body.pagina-metodologia #secao-3 .banco-grupos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); background: #d8d8d8; gap: 1px; } /* ========================================================= 5. CADA GRUPO COMO BLOCO DE SCHEMA ========================================================= */ body.pagina-metodologia #secao-3 .banco-grupo { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: start; min-height: 126px; padding: 21px 19px; background: #ffffff; border: 0; transition: background-color .16s ease, box-shadow .16s ease; } body.pagina-metodologia #secao-3 .banco-grupo:hover { z-index: 2; background: #f5ffff; box-shadow: inset 0 0 0 2px #00ffff; } /* o quinto grupo fecha o schema inteiro */ body.pagina-metodologia #secao-3 .banco-grupo:nth-child(5) { grid-column: 1 / -1; min-height: 104px; border-left: 6px solid #ff00ff; } /* ========================================================= 6. NÚMEROS ========================================================= */ body.pagina-metodologia #secao-3 .banco-grupo-numero { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; line-height: 1; } /* ========================================================= 7. NOME DO GRUPO ========================================================= */ body.pagina-metodologia #secao-3 .banco-grupo small { display: block; margin-top: 1px; color: #666666; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 8. CAMPOS ========================================================= */ body.pagina-metodologia #secao-3 .banco-grupo p { margin: 8px 0 0; color: #111111; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.5; } /* ========================================================= 9. ASSINATURAS CROMÁTICAS DISCRETAS ========================================================= */ body.pagina-metodologia #secao-3 .banco-grupo:nth-child(1) { border-top: 4px solid #00ffff; } body.pagina-metodologia #secao-3 .banco-grupo:nth-child(2) { border-top: 4px solid #ffff00; } body.pagina-metodologia #secao-3 .banco-grupo:nth-child(3) { border-top: 4px solid #ff00ff; } body.pagina-metodologia #secao-3 .banco-grupo:nth-child(4) { border-top: 4px solid #000000; } /* ========================================================= 10. INFRAESTRUTURA DA PLATAFORMA ========================================================= */ body.pagina-metodologia #secao-3 .tecnologia-bloco { position: relative; margin-top: 18px; padding: 21px 20px; overflow: hidden; background: #000000; border: 0; border-left: 6px solid #ff00ff; } body.pagina-metodologia #secao-3 .tecnologia-bloco::after { content: "STACK // PRODUÇÃO"; position: absolute; top: 0; right: 0; padding: 5px 7px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .6px; } body.pagina-metodologia #secao-3 .tecnologia-kicker { display: block; margin-bottom: 14px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 11. TECNOLOGIAS ========================================================= */ body.pagina-metodologia #secao-3 .tecnologia-itens { display: flex; flex-wrap: wrap; gap: 7px; } body.pagina-metodologia #secao-3 .tecnologia-itens span { padding: 8px 11px; color: #ffffff; background: #111111; border: 1px solid #555555; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: .5px; transition: color .16s ease, background-color .16s ease, border-color .16s ease; } body.pagina-metodologia #secao-3 .tecnologia-itens span:hover { color: #000000; background: #00ffff; border-color: #00ffff; } /* ========================================================= 12. MOBILE — SOMENTE SEÇÃO 03 ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-3 .banco-grupos { grid-template-columns: 1fr; } body.pagina-metodologia #secao-3 .banco-grupo:nth-child(5) { grid-column: auto; } body.pagina-metodologia #secao-3 .banco-topo { align-items: flex-start; flex-direction: column; } body.pagina-metodologia #secao-3 .banco-interface::before { display: none; } } @media (max-width: 430px) { body.pagina-metodologia #secao-3 .banco-grupo { grid-template-columns: 43px minmax(0,1fr); min-height: 0; padding: 17px 15px; } body.pagina-metodologia #secao-3 .banco-topo h3 { font-size: 30px; } } /* ========================================================= 10F — 04 // CURADORIA MATRIZ DE DECISÃO CURATORIAL ========================================================= */ /* ========================================================= 1. PRINCÍPIO — DADO ≠ CURADORIA ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-principio { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 32px 0 28px; overflow: hidden; color: #ffffff; background: #000000; border: 1px solid #000000; border-left: 7px solid #ff00ff; } /* lado esquerdo */ body.pagina-metodologia #secao-4 .curadoria-principio > span { display: flex; align-items: center; justify-content: center; padding: 24px 18px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 18px; font-weight: 900; line-height: 1; letter-spacing: .5px; text-align: center; } /* afirmação principal */ body.pagina-metodologia #secao-4 .curadoria-principio > strong { display: flex; align-items: center; padding: 24px 28px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 25px; font-weight: 800; line-height: 1.1; } /* assinatura técnica */ body.pagina-metodologia #secao-4 .curadoria-principio::after { content: "INTERPRETAÇÃO // CONTEXTO // RELAÇÃO"; position: absolute; right: 8px; bottom: 6px; color: rgba(255,255,255,.38); font-family: var(--gp-fonte-titulo); font-size: 7px; font-weight: 900; letter-spacing: .8px; } /* ========================================================= 2. MATRIZ CURATORIAL ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-grade { position: relative; display: grid; grid-template-columns: 1fr; margin: 28px 0; overflow: hidden; background: #ffffff; border: 1px solid #000000; } /* etiqueta da matriz */ body.pagina-metodologia #secao-4 .curadoria-grade::before { content: "MATRIZ CURATORIAL // 04 CRITÉRIOS"; display: block; padding: 8px 14px; color: #ffffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: .9px; } /* ========================================================= 3. CADA CRITÉRIO ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-card { position: relative; display: grid; grid-template-columns: 58px 175px minmax(0,1fr); gap: 19px; align-items: center; min-height: 128px; padding: 20px 22px; background: #ffffff; border: 0; border-bottom: 1px solid #d8d8d8; transition: background-color .16s ease, box-shadow .16s ease; } body.pagina-metodologia #secao-4 .curadoria-card:last-child { border-bottom: 0; } body.pagina-metodologia #secao-4 .curadoria-card:hover { z-index: 2; background: #f8ffff; box-shadow: inset 5px 0 0 #00ffff; } /* ========================================================= 4. NÚMERO DO CRITÉRIO ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-card > span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; line-height: 1; } /* ========================================================= 5. NOME DO CRITÉRIO ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-card h3 { margin: 0; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 27px; font-weight: 900; line-height: .95; } /* ========================================================= 6. DESCRIÇÃO ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-card p { margin: 0; color: #333333; font-family: var(--gp-fonte-texto); font-size: 14.5px; line-height: 1.55; } /* ========================================================= 7. CÓDIGO CROMÁTICO DOS CRITÉRIOS ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-card:nth-child(1) { border-left: 6px solid #00ffff; } body.pagina-metodologia #secao-4 .curadoria-card:nth-child(2) { border-left: 6px solid #ffff00; } body.pagina-metodologia #secao-4 .curadoria-card:nth-child(3) { border-left: 6px solid #ff00ff; } body.pagina-metodologia #secao-4 .curadoria-card:nth-child(4) { border-left: 6px solid #000000; } /* ========================================================= 8. LEITURA CRÍTICA ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-processo { position: relative; margin: 24px 0 26px; padding: 21px 20px; background: #f4f4f4; border: 1px solid #d7d7d7; border-top: 5px solid #ff00ff; } /* título */ body.pagina-metodologia #secao-4 .curadoria-processo-kicker { display: block; margin-bottom: 15px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 9. RÉGUA DE LEITURA ========================================================= */ body.pagina-metodologia #secao-4 .curadoria-processo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } body.pagina-metodologia #secao-4 .curadoria-processo-linha span { display: inline-flex; align-items: center; min-height: 31px; padding: 7px 10px; color: #ffffff; background: #000000; border: 1px solid #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: .5px; } body.pagina-metodologia #secao-4 .curadoria-processo-linha i { color: #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 18px; font-style: normal; font-weight: 900; } /* último estágio */ body.pagina-metodologia #secao-4 .curadoria-processo-linha span:last-child { color: #000000; background: #ffff00; } /* ========================================================= 10. NOTAS ESPECÍFICAS DA CURADORIA ========================================================= */ body.pagina-metodologia #secao-4 .metodo-nota { margin-top: 16px; background: #f5f5f5; border-left: 5px solid #ff00ff; } body.pagina-metodologia #secao-4 .metodo-nota + .metodo-nota { border-left-color: #00ffff; } /* ========================================================= 11. MOBILE — SOMENTE SEÇÃO 04 ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-4 .curadoria-principio { grid-template-columns: 1fr; } body.pagina-metodologia #secao-4 .curadoria-principio > span { justify-content: flex-start; padding: 15px 18px; font-size: 16px; } body.pagina-metodologia #secao-4 .curadoria-principio > strong { padding: 22px 20px; font-size: 23px; } body.pagina-metodologia #secao-4 .curadoria-principio::after { display: none; } body.pagina-metodologia #secao-4 .curadoria-card { grid-template-columns: 48px minmax(0,1fr); gap: 14px; min-height: 0; padding: 19px 17px; } body.pagina-metodologia #secao-4 .curadoria-card > span { grid-row: 1 / span 2; width: 40px; height: 40px; } body.pagina-metodologia #secao-4 .curadoria-card h3 { font-size: 25px; } body.pagina-metodologia #secao-4 .curadoria-card p { grid-column: 2; font-size: 14px; } } @media (max-width: 430px) { body.pagina-metodologia #secao-4 .curadoria-processo-linha { gap: 7px; } body.pagina-metodologia #secao-4 .curadoria-processo-linha span { font-size: 9px; } } /* ========================================================= 11F — 05 // CARTOGRAFIA DO VERBETE AO TERRITÓRIO ========================================================= */ /* ========================================================= 1. CAMPO CARTOGRÁFICO ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-esquema { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr); align-items: stretch; gap: 0; margin: 34px 0 24px; padding: 52px 20px 24px; overflow: hidden; background-color: #000000; background-image: linear-gradient( rgba(0,255,255,.07) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0,255,255,.07) 1px, transparent 1px ); background-size: 28px 28px; border: 1px solid #000000; border-top: 6px solid #00ffff; } /* título técnico */ body.pagina-metodologia #secao-5 .cartografia-esquema::before { content: "CARTOGRAFIA // GEOREFERENCIAMENTO"; position: absolute; top: 17px; left: 20px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1.2px; } /* coordenada/assinatura visual */ body.pagina-metodologia #secao-5 .cartografia-esquema::after { content: "REGISTRO → ESPAÇO → INTERFACE"; position: absolute; top: 16px; right: 18px; color: rgba(255,255,255,.38); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .8px; } /* ========================================================= 2. ETAPAS CARTOGRÁFICAS ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-etapa { position: relative; z-index: 2; min-height: 155px; padding: 19px 17px; color: #ffffff; background: rgba(15,15,15,.94); border: 1px solid #555555; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } body.pagina-metodologia #secao-5 .cartografia-etapa:hover { transform: translateY(-4px); background: #111111; border-color: #00ffff; box-shadow: 4px 4px 0 #00ffff; } /* ponto cartográfico */ body.pagina-metodologia #secao-5 .cartografia-etapa::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 11px; height: 11px; background: #ff00ff; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,0,255,.18); } /* ========================================================= 3. NÚMERO ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-etapa > span { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; color: #000000; background: #ffff00; border: 1px solid #ffffff; box-shadow: 3px 3px 0 #00ffff; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; } /* ========================================================= 4. TIPO DA ETAPA ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-etapa small { display: block; margin-top: 20px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 5. RESULTADO DA ETAPA ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-etapa strong { display: block; margin-top: 6px; max-width: 150px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 23px; font-weight: 900; line-height: .98; } /* ========================================================= 6. SETAS ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-esquema > i { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; color: #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 25px; font-style: normal; font-weight: 900; } /* ========================================================= 7. TIPOS DE LOCALIZAÇÃO — LEGENDA CARTOGRÁFICA ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-tipos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin: 25px 0; padding-top: 31px; overflow: hidden; background: #d8d8d8; border: 1px solid #000000; } /* título da legenda */ body.pagina-metodologia #secao-5 .cartografia-tipos::before { content: "LEGENDA // TIPOS DE REFERÊNCIA ESPACIAL"; position: absolute; top: 0; left: 0; right: 0; padding: 10px 14px; color: #ffffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 8. CADA TIPO DE LOCALIZAÇÃO ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-tipos article { position: relative; min-height: 185px; padding: 20px 18px; background: #ffffff; border: 0; transition: background-color .16s ease, box-shadow .16s ease; } body.pagina-metodologia #secao-5 .cartografia-tipos article:hover { z-index: 2; background: #f5ffff; box-shadow: inset 0 0 0 2px #00ffff; } /* ========================================================= 9. NÚMERO / MARCADOR ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-tipos article > span { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; } /* pequeno símbolo de localização */ body.pagina-metodologia #secao-5 .cartografia-tipos article::after { content: ""; position: absolute; top: 22px; right: 18px; width: 9px; height: 9px; background: #00ffff; border: 2px solid #000000; border-radius: 50%; } /* ========================================================= 10. TÍTULOS DOS TIPOS ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-tipos h3 { margin: 20px 0 9px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 25px; font-weight: 900; line-height: .98; } /* ========================================================= 11. DESCRIÇÕES ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-tipos p { margin: 0; color: #444444; font-family: var(--gp-fonte-texto); font-size: 14px; line-height: 1.55; } /* ========================================================= 12. CÓDIGO CROMÁTICO — NÍVEIS DE REFERÊNCIA ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-tipos article:nth-child(1), body.pagina-metodologia #secao-5 .cartografia-tipos article:nth-child(2) { border-top: 5px solid #00ffff; } body.pagina-metodologia #secao-5 .cartografia-tipos article:nth-child(3), body.pagina-metodologia #secao-5 .cartografia-tipos article:nth-child(4) { border-top: 5px solid #ffff00; } body.pagina-metodologia #secao-5 .cartografia-tipos article:nth-child(5), body.pagina-metodologia #secao-5 .cartografia-tipos article:nth-child(6) { border-top: 5px solid #ff00ff; } /* ========================================================= 13. ALERTA DE PRECISÃO ========================================================= */ body.pagina-metodologia #secao-5 .cartografia-alerta { position: relative; display: grid; grid-template-columns: 310px minmax(0,1fr); margin: 28px 0 22px; overflow: hidden; color: #ffffff; background: #000000; border: 1px solid #000000; border-top: 6px solid #ff00ff; } body.pagina-metodologia #secao-5 .cartografia-alerta > div { padding: 23px 22px; background: #ffff00; } body.pagina-metodologia #secao-5 .cartografia-alerta > div > span { display: block; margin-bottom: 8px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia #secao-5 .cartografia-alerta > div > strong { display: block; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 27px; font-weight: 900; line-height: 1; } body.pagina-metodologia #secao-5 .cartografia-alerta > p { display: flex; align-items: center; margin: 0; padding: 25px 27px; color: #ffffff; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.6; } /* ========================================================= 14. NOTA FINAL DA CARTOGRAFIA ========================================================= */ body.pagina-metodologia #secao-5 .metodo-nota { border-left-color: #00ffff; } /* ========================================================= 15. TABLET / MOBILE ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-5 .cartografia-esquema { grid-template-columns: 1fr; gap: 0; padding: 52px 18px 22px; } body.pagina-metodologia #secao-5 .cartografia-esquema::after { display: none; } body.pagina-metodologia #secao-5 .cartografia-etapa { min-height: 0; } body.pagina-metodologia #secao-5 .cartografia-esquema > i { min-height: 42px; transform: rotate(90deg); } body.pagina-metodologia #secao-5 .cartografia-etapa strong { max-width: none; } body.pagina-metodologia #secao-5 .cartografia-tipos { grid-template-columns: repeat(2, minmax(0,1fr)); } body.pagina-metodologia #secao-5 .cartografia-alerta { grid-template-columns: 1fr; } } @media (max-width: 430px) { body.pagina-metodologia #secao-5 .cartografia-tipos { grid-template-columns: 1fr; } body.pagina-metodologia #secao-5 .cartografia-tipos article { min-height: 0; } body.pagina-metodologia #secao-5 .cartografia-alerta > div > strong { font-size: 25px; } } /* ========================================================= 12F — 06 // CATEGORIAS E TEMAS DUAS FORMAS DE ATRAVESSAR O ACERVO ========================================================= */ /* ========================================================= 1. COMPARAÇÃO GERAL ========================================================= */ body.pagina-metodologia #secao-6 .classificacao-comparacao { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin: 34px 0 26px; padding-top: 34px; } body.pagina-metodologia #secao-6 .classificacao-comparacao::before { content: "CLASSIFICAÇÃO // 02 CAMADAS DE LEITURA"; position: absolute; top: 0; left: 0; right: 0; padding: 10px 14px; color: #ffffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 2. BLOCOS BASE ========================================================= */ body.pagina-metodologia #secao-6 .classificacao-bloco { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 22px 22px 20px; overflow: hidden; background: #ffffff; border: 1px solid #000000; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; } body.pagina-metodologia #secao-6 .classificacao-bloco:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 #000000; } /* ========================================================= 3. DIFERENCIAÇÃO VISUAL ========================================================= */ body.pagina-metodologia #secao-6 .categoria-bloco { border-top: 6px solid #00ffff; background: linear-gradient( 180deg, #ffffff 0%, #f7ffff 100% ); } body.pagina-metodologia #secao-6 .tema-bloco { border-top: 6px solid #ff00ff; background: linear-gradient( 180deg, #ffffff 0%, #fff8ff 100% ); } /* detalhe de assinatura */ body.pagina-metodologia #secao-6 .categoria-bloco::after, body.pagina-metodologia #secao-6 .tema-bloco::after { position: absolute; right: 16px; top: 18px; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .9px; } body.pagina-metodologia #secao-6 .categoria-bloco::after { content: "EIXO PRINCIPAL"; color: rgba(0,0,0,.28); } body.pagina-metodologia #secao-6 .tema-bloco::after { content: "EIXO TRANSVERSAL"; color: rgba(0,0,0,.28); } /* ========================================================= 4. TOPO DOS BLOCOS ========================================================= */ body.pagina-metodologia #secao-6 .classificacao-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } body.pagina-metodologia #secao-6 .classificacao-topo > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; line-height: 1; } body.pagina-metodologia #secao-6 .classificacao-topo > small { color: #6a6a6a; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1.1; letter-spacing: .9px; } /* ========================================================= 5. TÍTULOS E TEXTO ========================================================= */ body.pagina-metodologia #secao-6 .classificacao-bloco h3 { margin: 0 0 14px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 48px; font-weight: 900; line-height: .92; } body.pagina-metodologia #secao-6 .classificacao-bloco > p { margin: 0; color: #333333; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.65; } /* ========================================================= 6. BLOCO "PERGUNTA" ========================================================= */ body.pagina-metodologia #secao-6 .classificacao-pergunta { margin-top: auto; padding: 16px 18px; border-left: 5px solid #000000; } body.pagina-metodologia #secao-6 .classificacao-pergunta small { display: block; margin-bottom: 8px; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .9px; } body.pagina-metodologia #secao-6 .classificacao-pergunta strong { display: block; font-family: var(--gp-fonte-titulo); font-size: 25px; font-weight: 900; line-height: 1.02; } /* pergunta categoria */ body.pagina-metodologia #secao-6 .categoria-bloco .classificacao-pergunta { color: #000000; background: #ffff00; border-left-color: #00ffff; } body.pagina-metodologia #secao-6 .categoria-bloco .classificacao-pergunta small, body.pagina-metodologia #secao-6 .categoria-bloco .classificacao-pergunta strong { color: #000000; } /* pergunta tema */ body.pagina-metodologia #secao-6 .tema-bloco .classificacao-pergunta { color: #ffffff; background: #000000; border-left-color: #ff00ff; } body.pagina-metodologia #secao-6 .tema-bloco .classificacao-pergunta small { color: #00ffff; } body.pagina-metodologia #secao-6 .tema-bloco .classificacao-pergunta strong { color: #ffffff; } /* ========================================================= 7. EXEMPLO DE NAVEGAÇÃO ========================================================= */ body.pagina-metodologia #secao-6 .temas-exemplo { position: relative; margin: 24px 0 24px; padding: 20px 20px 22px; background: #000000; border-top: 6px solid #00ffff; overflow: hidden; } body.pagina-metodologia #secao-6 .temas-exemplo::after { content: "NAVEGAÇÃO COMBINADA"; position: absolute; right: 16px; top: 14px; color: rgba(255,255,255,.35); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .8px; } body.pagina-metodologia #secao-6 .temas-exemplo-kicker { display: block; margin-bottom: 16px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1px; } body.pagina-metodologia #secao-6 .temas-exemplo-fluxo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body.pagina-metodologia #secao-6 .temas-exemplo-fluxo > i { color: #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 20px; font-style: normal; font-weight: 900; line-height: 1; } body.pagina-metodologia #secao-6 .tema-chip, body.pagina-metodologia #secao-6 .categoria-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 12px; font-family: var(--gp-fonte-titulo); font-size: 12px; font-weight: 900; line-height: 1; } body.pagina-metodologia #secao-6 .tema-chip { color: #ffffff; background: #111111; border: 1px solid #ff00ff; box-shadow: 3px 3px 0 #ff00ff; } body.pagina-metodologia #secao-6 .categoria-chip { color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #00ffff; } body.pagina-metodologia #secao-6 .temas-exemplo-fluxo > strong { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 14px; color: #000000; background: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 14px; font-weight: 900; line-height: 1.05; } /* ========================================================= 8. PRINCÍPIO — MÚLTIPLAS CAMADAS ========================================================= */ body.pagina-metodologia #secao-6 .classificacao-principio { display: grid; grid-template-columns: 295px minmax(0,1fr); margin: 24px 0 18px; overflow: hidden; background: #f5f5f5; border: 1px solid #000000; border-top: 6px solid #ffff00; } body.pagina-metodologia #secao-6 .classificacao-principio > span { display: flex; align-items: center; padding: 22px 20px; color: #00ffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 15px; font-weight: 900; line-height: 1.1; } body.pagina-metodologia #secao-6 .classificacao-principio > p { margin: 0; padding: 22px 24px; color: #333333; background: #f5f5f5; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.68; } /* ========================================================= 9. NOTA FINAL ========================================================= */ body.pagina-metodologia #secao-6 .metodo-nota { border-left-color: #ff00ff; } /* ========================================================= 10. TABLET / MOBILE ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-6 .classificacao-comparacao { grid-template-columns: 1fr; gap: 16px; } body.pagina-metodologia #secao-6 .classificacao-bloco { min-height: 0; } body.pagina-metodologia #secao-6 .classificacao-bloco h3 { font-size: 42px; } body.pagina-metodologia #secao-6 .classificacao-pergunta strong { font-size: 22px; } body.pagina-metodologia #secao-6 .classificacao-principio { grid-template-columns: 1fr; } body.pagina-metodologia #secao-6 .classificacao-principio > span { padding: 18px 18px; } body.pagina-metodologia #secao-6 .classificacao-principio > p { padding: 20px 18px; } body.pagina-metodologia #secao-6 .temas-exemplo::after { display: none; } } @media (max-width: 430px) { body.pagina-metodologia #secao-6 .classificacao-bloco { padding: 20px 18px 18px; } body.pagina-metodologia #secao-6 .classificacao-bloco h3 { font-size: 38px; } body.pagina-metodologia #secao-6 .classificacao-pergunta strong { font-size: 20px; } body.pagina-metodologia #secao-6 .temas-exemplo-fluxo { gap: 8px; } body.pagina-metodologia #secao-6 .temas-exemplo-fluxo > strong { font-size: 13px; } } /* ========================================================= 13F — 07 // CONEXÕES TOPOLOGIA DE RELAÇÕES DO ACERVO ========================================================= */ /* ========================================================= 1. CAMPO DE REDE ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-rede { position: relative; display: grid; grid-template-columns: 1fr 250px 1fr; align-items: center; min-height: 510px; margin: 34px 0 26px; padding: 62px 28px 30px; overflow: hidden; background-color: #000000; background-image: linear-gradient( rgba(0,255,255,.065) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0,255,255,.065) 1px, transparent 1px ); background-size: 30px 30px; border: 1px solid #000000; border-top: 6px solid #00ffff; } /* título técnico */ body.pagina-metodologia #secao-7 .conexoes-rede::before { content: "REDE // RELAÇÕES ENTRE MEMÓRIAS"; position: absolute; top: 18px; left: 22px; z-index: 8; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1.1px; } /* legenda técnica */ body.pagina-metodologia #secao-7 .conexoes-rede::after { content: "NÓ CENTRAL // 06 TIPOS DE VÍNCULO"; position: absolute; top: 17px; right: 20px; z-index: 8; color: rgba(255,255,255,.35); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .8px; } /* ========================================================= 2. NÓ CENTRAL ========================================================= */ body.pagina-metodologia #secao-7 .conexao-central { position: relative; z-index: 6; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 215px; min-height: 215px; margin: auto; padding: 25px; text-align: center; color: #000000; background: #ffff00; border: 2px solid #ffffff; box-shadow: 7px 7px 0 #00ffff; } /* ponto central */ body.pagina-metodologia #secao-7 .conexao-central::before { content: ""; position: absolute; top: -10px; left: 50%; width: 16px; height: 16px; background: #ff00ff; border: 3px solid #ffffff; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 4px rgba(255,0,255,.2); } body.pagina-metodologia #secao-7 .conexao-central > span { display: block; margin-bottom: 9px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; } body.pagina-metodologia #secao-7 .conexao-central > strong { display: block; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 37px; font-weight: 900; line-height: .9; } /* ========================================================= 3. GRADE DOS NÓS PERIFÉRICOS ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes { position: absolute; z-index: 3; inset: 76px 28px 30px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: repeat(3, 1fr); column-gap: 330px; row-gap: 18px; align-items: center; } /* ========================================================= 4. CADA NÓ ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article { position: relative; z-index: 4; display: grid; grid-template-columns: 43px minmax(0,1fr); gap: 13px; align-items: center; min-height: 92px; padding: 16px 17px; color: #ffffff; background: rgba(17,17,17,.97); border: 1px solid #555555; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } body.pagina-metodologia #secao-7 .conexoes-ligacoes article:hover { z-index: 9; transform: translateY(-3px); background: #151515; border-color: #00ffff; box-shadow: 4px 4px 0 #00ffff; } /* ========================================================= 5. NÚMEROS ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article > span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #000000; background: #ffff00; border: 1px solid #ffffff; box-shadow: 3px 3px 0 #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; } /* ========================================================= 6. NOMES DOS NÓS ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article > strong { color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 23px; font-weight: 900; line-height: .95; } /* ========================================================= 7. LINHAS DE CONEXÃO ========================================================= */ /* nós da esquerda */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(odd)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 166px; height: 2px; background: linear-gradient( 90deg, #00ffff, #ff00ff ); transform: translateY(-50%); transform-origin: left center; opacity: .9; pointer-events: none; } /* nós da direita */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(even)::before { content: ""; position: absolute; top: 50%; right: 100%; width: 166px; height: 2px; background: linear-gradient( 90deg, #ff00ff, #00ffff ); transform: translateY(-50%); transform-origin: right center; opacity: .9; pointer-events: none; } /* pequenas terminações da conexão */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(odd)::before { content: ""; position: absolute; top: 50%; right: -5px; z-index: 7; width: 9px; height: 9px; background: #00ffff; border: 2px solid #000000; border-radius: 50%; transform: translateY(-50%); } body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(even)::after { content: ""; position: absolute; top: 50%; left: -5px; z-index: 7; width: 9px; height: 9px; background: #ff00ff; border: 2px solid #000000; border-radius: 50%; transform: translateY(-50%); } /* ========================================================= 8. VARIAÇÃO CROMÁTICA DOS NÓS ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(1), body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(2) { border-top: 4px solid #00ffff; } body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(3), body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(4) { border-top: 4px solid #ffff00; } body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(5), body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(6) { border-top: 4px solid #ff00ff; } /* ========================================================= 9. PRINCÍPIO CURATORIAL DAS RELAÇÕES ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-principio { position: relative; display: grid; grid-template-columns: 275px minmax(0,1fr); margin: 28px 0 22px; overflow: hidden; background: #000000; border: 1px solid #000000; border-top: 6px solid #ff00ff; } /* faixa conceitual */ body.pagina-metodologia #secao-7 .conexoes-principio > span { grid-column: 1; grid-row: 1; display: flex; align-items: flex-end; padding: 23px 22px 6px; color: #00ffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } /* frase central */ body.pagina-metodologia #secao-7 .conexoes-principio > strong { grid-column: 1; grid-row: 2; display: block; padding: 6px 22px 24px; color: #ffffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 28px; font-weight: 900; line-height: 1.02; } /* explicação */ body.pagina-metodologia #secao-7 .conexoes-principio > p { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; margin: 0; padding: 28px; color: #222222; background: #f3f3f3; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.65; border-left: 6px solid #ffff00; } /* ========================================================= 10. NOTA FINAL ========================================================= */ body.pagina-metodologia #secao-7 .metodo-nota { border-left-color: #ff00ff; } /* ========================================================= 11. MOBILE ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-7 .conexoes-rede { display: block; min-height: 0; padding: 60px 18px 24px; } body.pagina-metodologia #secao-7 .conexoes-rede::after { display: none; } body.pagina-metodologia #secao-7 .conexao-central { width: auto; max-width: 260px; min-height: 175px; margin: 0 auto 36px; } body.pagina-metodologia #secao-7 .conexao-central > strong { font-size: 33px; } body.pagina-metodologia #secao-7 .conexoes-ligacoes { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: auto; column-gap: 12px; row-gap: 12px; } /* remove conexões horizontais do desktop */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article::before, body.pagina-metodologia #secao-7 .conexoes-ligacoes article::after { display: none; } /* cria eixo vertical sutil */ body.pagina-metodologia #secao-7 .conexoes-ligacoes::before { content: ""; position: absolute; z-index: 1; top: -34px; left: 50%; bottom: 0; width: 2px; background: linear-gradient( #ff00ff, #00ffff ); transform: translateX(-50%); opacity: .45; } body.pagina-metodologia #secao-7 .conexoes-ligacoes article { z-index: 3; min-height: 95px; grid-template-columns: 38px minmax(0,1fr); padding: 15px; } body.pagina-metodologia #secao-7 .conexoes-ligacoes article > strong { font-size: 20px; } body.pagina-metodologia #secao-7 .conexoes-principio { grid-template-columns: 1fr; } body.pagina-metodologia #secao-7 .conexoes-principio > span { grid-column: 1; grid-row: auto; padding: 20px 20px 7px; } body.pagina-metodologia #secao-7 .conexoes-principio > strong { grid-column: 1; grid-row: auto; padding: 7px 20px 23px; font-size: 25px; } body.pagina-metodologia #secao-7 .conexoes-principio > p { grid-column: 1; grid-row: auto; padding: 22px 20px; border-left: 0; border-top: 6px solid #ffff00; } } @media (max-width: 430px) { body.pagina-metodologia #secao-7 .conexoes-ligacoes { grid-template-columns: 1fr; } body.pagina-metodologia #secao-7 .conexoes-ligacoes::before { left: 25px; } body.pagina-metodologia #secao-7 .conexoes-ligacoes article { min-height: 0; } } /* ========================================================= AJUSTE FINAL — 07 // CONEXÕES LINHAS CONVERGINDO PARA O NÓ CENTRAL ========================================================= */ /* ========================================================= LINHA SUPERIOR ESQUERDA PESSOAS → VERBETE CENTRAL ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(1)::after { width: 172px; transform: translateY(-50%) rotate(10deg); transform-origin: left center; } /* ========================================================= LINHA SUPERIOR DIREITA LUGARES → VERBETE CENTRAL ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(2)::before { width: 172px; transform: translateY(-50%) rotate(-10deg); transform-origin: right center; } /* ========================================================= LINHA CENTRAL INSTITUIÇÕES / GRUPOS ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(3)::after, body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(4)::before { transform: translateY(-50%) rotate(0deg); } /* ========================================================= LINHA INFERIOR ESQUERDA OBRAS → VERBETE CENTRAL ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(5)::after { width: 172px; transform: translateY(-50%) rotate(-10deg); transform-origin: left center; } /* ========================================================= LINHA INFERIOR DIREITA ACONTECIMENTOS → VERBETE CENTRAL ========================================================= */ body.pagina-metodologia #secao-7 .conexoes-ligacoes article:nth-child(6)::before { width: 172px; transform: translateY(-50%) rotate(10deg); transform-origin: right center; } @media (max-width: 430px) { body.pagina-metodologia #secao-7 .conexoes-ligacoes::before { display: none; } } /* ========================================================= 14F — 08 // FONTES E RASTREABILIDADE PROVENIÊNCIA + CADEIA DE EVIDÊNCIAS ========================================================= */ /* ========================================================= 1. GRADE DAS FONTES ========================================================= */ body.pagina-metodologia #secao-8 .fontes-metodo-grade { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin: 34px 0 26px; padding-top: 34px; overflow: hidden; background: #d8d8d8; border: 1px solid #000000; } /* cabeçalho da coleção */ body.pagina-metodologia #secao-8 .fontes-metodo-grade::before { content: "FONTES // ORIGEM DA INFORMAÇÃO"; position: absolute; top: 0; left: 0; right: 0; padding: 10px 14px; color: #ffffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 2. CADA TIPO DE FONTE ========================================================= */ body.pagina-metodologia #secao-8 .fontes-metodo-grade article { position: relative; min-height: 190px; padding: 21px 19px; overflow: hidden; background: #ffffff; border: 0; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:hover { z-index: 3; transform: translateY(-2px); background: #f7ffff; box-shadow: inset 0 0 0 2px #00ffff; } /* ========================================================= 3. PEQUENO CÓDIGO DE PROVENIÊNCIA ========================================================= */ body.pagina-metodologia #secao-8 .fontes-metodo-grade article::after { position: absolute; top: 20px; right: 17px; color: #999999; font-family: var(--gp-fonte-titulo); font-size: 7px; font-weight: 900; letter-spacing: .7px; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(1)::after { content: "REF // ACAD"; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(2)::after { content: "REF // DOC"; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(3)::after { content: "REF // ACERVO"; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(4)::after { content: "REF // IMP"; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(5)::after { content: "REF // COM"; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(6)::after { content: "REF // ORAL"; } /* ========================================================= 4. NUMERAÇÃO ========================================================= */ body.pagina-metodologia #secao-8 .fontes-metodo-grade article > span { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; margin-bottom: 21px; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; } /* ========================================================= 5. NOME DA FONTE ========================================================= */ body.pagina-metodologia #secao-8 .fontes-metodo-grade h3 { margin: 0 0 10px; max-width: 88%; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 28px; font-weight: 900; line-height: .98; } /* ========================================================= 6. DESCRIÇÃO DA FONTE ========================================================= */ body.pagina-metodologia #secao-8 .fontes-metodo-grade p { margin: 0; color: #444444; font-family: var(--gp-fonte-texto); font-size: 14px; line-height: 1.55; } /* ========================================================= 7. CÓDIGO CROMÁTICO ========================================================= */ /* fontes formais / documentais */ body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(1), body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(2), body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(3) { border-top: 5px solid #00ffff; } /* circulação pública */ body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(4) { border-top: 5px solid #ffff00; } /* conhecimento territorial / oral */ body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(5), body.pagina-metodologia #secao-8 .fontes-metodo-grade article:nth-child(6) { border-top: 5px solid #ff00ff; } /* ========================================================= 8. FLUXO DE RASTREABILIDADE ========================================================= */ body.pagina-metodologia #secao-8 .rastreabilidade-fluxo { position: relative; margin: 28px 0 22px; padding: 21px 20px 23px; overflow: hidden; color: #ffffff; background: #000000; border-top: 6px solid #00ffff; } /* assinatura */ body.pagina-metodologia #secao-8 .rastreabilidade-fluxo::after { content: "CADEIA // PROVENIÊNCIA"; position: absolute; top: 14px; right: 16px; color: rgba(255,255,255,.34); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .8px; } /* ========================================================= 9. KICKER DO FLUXO ========================================================= */ body.pagina-metodologia #secao-8 .rastreabilidade-kicker { display: block; margin-bottom: 18px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 10. LINHA DE RASTREABILIDADE ========================================================= */ body.pagina-metodologia #secao-8 .rastreabilidade-linha { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1.25fr 32px 1.25fr; align-items: stretch; gap: 0; } /* estágios */ body.pagina-metodologia #secao-8 .rastreabilidade-linha > span { position: relative; display: flex; align-items: center; justify-content: center; min-height: 66px; padding: 12px 9px; color: #ffffff; background: #111111; border: 1px solid #555555; text-align: center; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; line-height: 1.05; letter-spacing: .5px; } /* primeiro estágio */ body.pagina-metodologia #secao-8 .rastreabilidade-linha > span:first-child { color: #000000; background: #ffff00; border-color: #ffff00; } /* resultado público */ body.pagina-metodologia #secao-8 .rastreabilidade-linha > span:last-child { color: #000000; background: #00ffff; border-color: #00ffff; } /* setas */ body.pagina-metodologia #secao-8 .rastreabilidade-linha > i { display: flex; align-items: center; justify-content: center; color: #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 20px; font-style: normal; font-weight: 900; } /* ========================================================= 11. REGRA DE REFERÊNCIAS ========================================================= */ body.pagina-metodologia #secao-8 .fontes-regra { position: relative; display: grid; grid-template-columns: 260px minmax(0,1fr); margin: 22px 0; overflow: hidden; background: #ffffff; border: 1px solid #000000; border-top: 6px solid #ffff00; } body.pagina-metodologia #secao-8 .fontes-regra > span { display: flex; align-items: center; padding: 22px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 14px; font-weight: 900; line-height: 1.05; letter-spacing: .6px; } body.pagina-metodologia #secao-8 .fontes-regra > p { display: flex; align-items: center; margin: 0; padding: 22px 25px; color: #222222; background: #f5f5f5; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.6; } /* ========================================================= 12. NOTA FINAL DA SEÇÃO ========================================================= */ body.pagina-metodologia #secao-8 .metodo-nota { border-left-color: #ff00ff; } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-8 .fontes-metodo-grade { grid-template-columns: repeat(2, minmax(0,1fr)); } body.pagina-metodologia #secao-8 .rastreabilidade-linha { grid-template-columns: 1fr; gap: 0; } body.pagina-metodologia #secao-8 .rastreabilidade-linha > i { min-height: 36px; transform: rotate(90deg); } body.pagina-metodologia #secao-8 .rastreabilidade-fluxo::after { display: none; } body.pagina-metodologia #secao-8 .fontes-regra { grid-template-columns: 1fr; } } @media (max-width: 430px) { body.pagina-metodologia #secao-8 .fontes-metodo-grade { grid-template-columns: 1fr; } body.pagina-metodologia #secao-8 .fontes-metodo-grade article { min-height: 0; } body.pagina-metodologia #secao-8 .fontes-metodo-grade h3 { font-size: 26px; } } /* ========================================================= 15F — 09 // ACERVO VISUAL IMAGEM + METADADOS + DIREITOS ========================================================= */ /* ========================================================= 1. COMPARAÇÃO DOS MODOS DE USO ========================================================= */ body.pagina-metodologia #secao-9 .acervo-visual-comparacao { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 34px 0 28px; padding-top: 36px; } body.pagina-metodologia #secao-9 .acervo-visual-comparacao::before { content: "ACERVO VISUAL // MODOS DE REPRESENTAÇÃO"; position: absolute; top: 0; left: 0; right: 0; padding: 10px 14px; color: #ffffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 2. CARTÕES / JANELAS VISUAIS ========================================================= */ body.pagina-metodologia #secao-9 .imagem-tipo { position: relative; min-height: 390px; padding: 215px 22px 22px; overflow: hidden; background: #ffffff; border: 1px solid #000000; transition: transform .16s ease, box-shadow .16s ease; } body.pagina-metodologia #secao-9 .imagem-tipo:hover { transform: translateY(-4px); box-shadow: 5px 5px 0 #000000; } /* ========================================================= 3. "VISOR" DA IMAGEM ========================================================= */ body.pagina-metodologia #secao-9 .imagem-tipo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 180px; background-color: #0b0b0b; background-image: linear-gradient( rgba(255,255,255,.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.06) 1px, transparent 1px ); background-size: 24px 24px; border-bottom: 1px solid #555555; } /* documental */ body.pagina-metodologia #secao-9 .imagem-documental { border-top: 6px solid #00ffff; } body.pagina-metodologia #secao-9 .imagem-documental::after { content: "REGISTRO // DIRETO"; position: absolute; top: 144px; left: 22px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } /* simbólica */ body.pagina-metodologia #secao-9 .imagem-simbolica { border-top: 6px solid #ff00ff; } body.pagina-metodologia #secao-9 .imagem-simbolica::after { content: "CONTEXTO // VISUAL"; position: absolute; top: 144px; left: 22px; color: #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } /* ========================================================= 4. NÚMERO SOBRE O VISOR ========================================================= */ body.pagina-metodologia #secao-9 .imagem-tipo > span { position: absolute; z-index: 4; top: 24px; left: 22px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #000000; background: #ffff00; border: 1px solid #ffffff; box-shadow: 4px 4px 0 #00ffff; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; } body.pagina-metodologia #secao-9 .imagem-simbolica > span { box-shadow: 4px 4px 0 #ff00ff; } /* ========================================================= 5. TIPO / CLASSIFICAÇÃO ========================================================= */ body.pagina-metodologia #secao-9 .imagem-tipo > small { display: block; margin-bottom: 10px; color: #6b6b6b; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 6. TÍTULO ========================================================= */ body.pagina-metodologia #secao-9 .imagem-tipo h3 { margin: 0 0 12px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 35px; font-weight: 900; line-height: .96; } /* ========================================================= 7. DESCRIÇÃO ========================================================= */ body.pagina-metodologia #secao-9 .imagem-tipo p { margin: 0; color: #3d3d3d; font-family: var(--gp-fonte-texto); font-size: 14.5px; line-height: 1.58; } /* ========================================================= 8. FICHA DE RASTREABILIDADE ========================================================= */ body.pagina-metodologia #secao-9 .imagem-ficha { position: relative; margin: 28px 0 26px; overflow: hidden; background: #000000; border: 1px solid #000000; border-top: 6px solid #00ffff; } /* ========================================================= 9. CABEÇALHO DA FICHA ========================================================= */ body.pagina-metodologia #secao-9 .imagem-ficha-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 22px 20px; background: #000000; } body.pagina-metodologia #secao-9 .imagem-ficha-topo > span { color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia #secao-9 .imagem-ficha-topo > strong { color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 29px; font-weight: 900; line-height: .95; text-align: right; } /* ========================================================= 10. CAMPOS DA FICHA ========================================================= */ body.pagina-metodologia #secao-9 .imagem-ficha-campos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: #4a4a4a; } body.pagina-metodologia #secao-9 .imagem-ficha-campos > span { position: relative; display: flex; align-items: flex-end; min-height: 94px; padding: 38px 14px 14px; color: #111111; background: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 900; line-height: 1.1; letter-spacing: .4px; } /* microidentificador */ body.pagina-metodologia #secao-9 .imagem-ficha-campos > span::before { content: "META"; position: absolute; top: 12px; left: 14px; color: #999999; font-family: var(--gp-fonte-titulo); font-size: 7px; font-weight: 900; letter-spacing: .8px; } /* campos diretamente ligados a uso/direitos */ body.pagina-metodologia #secao-9 .imagem-ficha-campos > span:nth-child(7) { background: #ffff00; } body.pagina-metodologia #secao-9 .imagem-ficha-campos > span:nth-child(7)::before { color: #000000; } body.pagina-metodologia #secao-9 .imagem-ficha-campos > span:nth-child(8) { color: #ffffff; background: #000000; box-shadow: inset 0 5px 0 #ff00ff; } body.pagina-metodologia #secao-9 .imagem-ficha-campos > span:nth-child(8)::before { color: #00ffff; } /* ========================================================= 11. DIREITOS / RESPONSABILIDADE ========================================================= */ body.pagina-metodologia #secao-9 .direitos-bloco { position: relative; display: grid; grid-template-columns: 350px minmax(0,1fr); margin: 28px 0 22px; overflow: hidden; background: #000000; border: 1px solid #000000; border-top: 6px solid #ff00ff; } /* kicker */ body.pagina-metodologia #secao-9 .direitos-bloco > span { grid-column: 1; grid-row: 1; display: flex; align-items: flex-end; padding: 25px 24px 8px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* afirmação */ body.pagina-metodologia #secao-9 .direitos-bloco > h3 { grid-column: 1; grid-row: 2; margin: 0; padding: 7px 24px 27px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 31px; font-weight: 900; line-height: 1; } /* explicação */ body.pagina-metodologia #secao-9 .direitos-bloco > p { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; margin: 0; padding: 30px; color: #000000; background: #ffff00; border-left: 6px solid #00ffff; font-family: var(--gp-fonte-texto); font-size: 16px; line-height: 1.65; } /* ========================================================= 12. NOTA FINAL ========================================================= */ body.pagina-metodologia #secao-9 .metodo-nota { border-left-color: #ff00ff; } /* ========================================================= 13. MOBILE / TABLET ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-9 .acervo-visual-comparacao { grid-template-columns: 1fr; gap: 16px; } body.pagina-metodologia #secao-9 .imagem-tipo { min-height: 0; } body.pagina-metodologia #secao-9 .imagem-ficha-topo { align-items: flex-start; flex-direction: column; } body.pagina-metodologia #secao-9 .imagem-ficha-topo > strong { text-align: left; } body.pagina-metodologia #secao-9 .imagem-ficha-campos { grid-template-columns: repeat(2, minmax(0,1fr)); } body.pagina-metodologia #secao-9 .direitos-bloco { grid-template-columns: 1fr; } body.pagina-metodologia #secao-9 .direitos-bloco > span { grid-column: 1; grid-row: auto; } body.pagina-metodologia #secao-9 .direitos-bloco > h3 { grid-column: 1; grid-row: auto; } body.pagina-metodologia #secao-9 .direitos-bloco > p { grid-column: 1; grid-row: auto; padding: 24px 21px; border-left: 0; border-top: 6px solid #00ffff; } } @media (max-width: 430px) { body.pagina-metodologia #secao-9 .imagem-tipo { padding: 190px 18px 20px; } body.pagina-metodologia #secao-9 .imagem-tipo::before { height: 160px; } body.pagina-metodologia #secao-9 .imagem-documental::after, body.pagina-metodologia #secao-9 .imagem-simbolica::after { top: 126px; left: 18px; } body.pagina-metodologia #secao-9 .imagem-tipo h3 { font-size: 31px; } body.pagina-metodologia #secao-9 .imagem-ficha-campos { grid-template-columns: 1fr; } body.pagina-metodologia #secao-9 .imagem-ficha-campos > span { min-height: 78px; } body.pagina-metodologia #secao-9 .direitos-bloco > h3 { font-size: 28px; } } /* ========================================================= 16F — 10 // LIMITES E CONTINUIDADE SISTEMA ABERTO + REVISÃO CONTÍNUA ========================================================= */ /* ========================================================= 1. PAINEL DE LIMITES ========================================================= */ body.pagina-metodologia #secao-10 .limites-painel { position: relative; margin: 36px 0 28px; overflow: hidden; background: #000000; border: 1px solid #000000; border-top: 6px solid #ff00ff; } /* ========================================================= 2. CABEÇALHO DO PAINEL ========================================================= */ body.pagina-metodologia #secao-10 .limites-topo { display: grid; grid-template-columns: 280px minmax(0,1fr); align-items: stretch; } body.pagina-metodologia #secao-10 .limites-topo > span { display: flex; align-items: center; padding: 24px; color: #00ffff; background: #000000; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1px; } body.pagina-metodologia #secao-10 .limites-topo > strong { display: flex; align-items: center; padding: 22px 26px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 31px; font-weight: 900; line-height: .98; } /* ========================================================= 3. GRADE — O QUE AINDA PRECISA SER AMPLIADO ========================================================= */ body.pagina-metodologia #secao-10 .limites-grade { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: #777777; } /* cada limite */ body.pagina-metodologia #secao-10 .limites-grade > span { position: relative; display: flex; align-items: flex-end; min-height: 138px; padding: 58px 18px 18px; color: #111111; background: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 17px; font-weight: 900; line-height: 1.05; transition: background-color .16s ease, transform .16s ease; } body.pagina-metodologia #secao-10 .limites-grade > span:hover { z-index: 3; transform: translateY(-2px); background: #f5ffff; } /* numeração */ body.pagina-metodologia #secao-10 .limites-grade > span::before { position: absolute; top: 17px; left: 17px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #000000; background: #ffff00; border: 1px solid #000000; box-shadow: 3px 3px 0 #000000; font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(1)::before { content: "01"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(2)::before { content: "02"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(3)::before { content: "03"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(4)::before { content: "04"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(5)::before { content: "05"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(6)::before { content: "06"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(7)::before { content: "07"; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(8)::before { content: "08"; } /* assinatura de status */ body.pagina-metodologia #secao-10 .limites-grade > span::after { content: "EM AMPLIAÇÃO"; position: absolute; top: 20px; right: 15px; color: #aaaaaa; font-family: var(--gp-fonte-titulo); font-size: 7px; font-weight: 900; letter-spacing: .7px; } /* códigos cromáticos */ body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(1), body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(2), body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(3) { border-top: 5px solid #00ffff; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(4), body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(5) { border-top: 5px solid #ffff00; } body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(6), body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(7), body.pagina-metodologia #secao-10 .limites-grade > span:nth-child(8) { border-top: 5px solid #ff00ff; } /* ========================================================= 4. CICLO CONTÍNUO ========================================================= */ body.pagina-metodologia #secao-10 .continuidade-fluxo { position: relative; margin: 30px 0 28px; padding: 22px 22px 25px; overflow: hidden; color: #ffffff; background: #000000; border-top: 6px solid #00ffff; } /* assinatura técnica */ body.pagina-metodologia #secao-10 .continuidade-fluxo::after { content: "PROCESSO // NÃO LINEAR"; position: absolute; top: 15px; right: 18px; color: rgba(255,255,255,.33); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .8px; } body.pagina-metodologia #secao-10 .continuidade-kicker { display: block; margin-bottom: 20px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; letter-spacing: 1px; } /* linha do ciclo */ body.pagina-metodologia #secao-10 .continuidade-fluxo > div { display: flex; align-items: center; gap: 8px; } body.pagina-metodologia #secao-10 .continuidade-fluxo strong { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 68px; padding: 12px; color: #ffffff; background: #111111; border: 1px solid #555555; font-family: var(--gp-fonte-titulo); font-size: 13px; font-weight: 900; line-height: 1; text-align: center; } body.pagina-metodologia #secao-10 .continuidade-fluxo strong:first-child { color: #000000; background: #ffff00; border-color: #ffff00; } body.pagina-metodologia #secao-10 .continuidade-fluxo strong:last-of-type { color: #000000; background: #00ffff; border-color: #00ffff; } /* setas */ body.pagina-metodologia #secao-10 .continuidade-fluxo i { display: flex; flex: 0 0 25px; align-items: center; justify-content: center; color: #ff00ff; font-family: var(--gp-fonte-titulo); font-size: 20px; font-style: normal; font-weight: 900; } /* retorno do ciclo */ body.pagina-metodologia #secao-10 .continuidade-fluxo i:last-child { color: #ffff00; font-size: 27px; } /* ========================================================= 5. PARTICIPAÇÃO COMUNITÁRIA ========================================================= */ body.pagina-metodologia #secao-10 .participacao-metodo { display: grid; grid-template-columns: 340px minmax(0,1fr); margin: 30px 0; overflow: hidden; border: 1px solid #000000; border-top: 6px solid #ff00ff; background: #eeeeee; } /* título territorial */ body.pagina-metodologia #secao-10 .participacao-metodo > div { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; padding: 30px 27px; color: #ffffff; background: #000000; } body.pagina-metodologia #secao-10 .participacao-metodo > div span { display: block; margin-bottom: 14px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia #secao-10 .participacao-metodo > div h3 { margin: 0; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 34px; font-weight: 900; line-height: .98; } /* parágrafos */ body.pagina-metodologia #secao-10 .participacao-metodo > p { grid-column: 2; margin: 0; padding: 26px 30px; color: #2a2a2a; background: #f5f5f5; font-family: var(--gp-fonte-texto); font-size: 15.5px; line-height: 1.65; } body.pagina-metodologia #secao-10 .participacao-metodo > p + p { border-top: 5px solid #ffff00; background: #ffffff; } /* ========================================================= 6. COMPROMISSO FINAL ========================================================= */ body.pagina-metodologia #secao-10 .compromisso-final { position: relative; margin: 34px 0 0; padding: 34px 28px 28px; overflow: hidden; color: #ffffff; background-color: #000000; background-image: linear-gradient( rgba(0,255,255,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0,255,255,.055) 1px, transparent 1px ); background-size: 30px 30px; border-top: 7px solid #ffff00; } /* assinatura final */ body.pagina-metodologia #secao-10 .compromisso-final::after { content: "METODOLOGIA // ABERTA À REVISÃO"; position: absolute; top: 18px; right: 20px; color: rgba(255,255,255,.38); font-family: var(--gp-fonte-titulo); font-size: 8px; font-weight: 900; letter-spacing: .9px; } /* kicker */ body.pagina-metodologia #secao-10 .compromisso-final > span { display: block; margin-bottom: 13px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; letter-spacing: 1px; } /* manifesto */ body.pagina-metodologia #secao-10 .compromisso-final > h3 { max-width: 730px; margin: 0 0 19px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 47px; font-weight: 900; line-height: .94; } /* explicação */ body.pagina-metodologia #secao-10 .compromisso-final > p { max-width: 850px; margin: 0 0 28px; color: #dddddd; font-family: var(--gp-fonte-texto); font-size: 16px; line-height: 1.65; } /* ========================================================= 7. PRINCÍPIOS FINAIS ========================================================= */ body.pagina-metodologia #secao-10 .compromisso-itens { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } body.pagina-metodologia #secao-10 .compromisso-itens > span { position: relative; display: flex; align-items: flex-end; min-height: 118px; padding: 50px 17px 17px; color: #ffffff; background: rgba(17,17,17,.96); border: 1px solid #555555; font-family: var(--gp-fonte-titulo); font-size: 16px; font-weight: 900; line-height: 1.05; } /* numeração */ body.pagina-metodologia #secao-10 .compromisso-itens > span::before { position: absolute; top: 14px; left: 15px; color: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(1)::before { content: "01"; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(2)::before { content: "02"; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(3)::before { content: "03"; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(4)::before { content: "04"; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(5)::before { content: "05"; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(6)::before { content: "06"; } /* códigos cromáticos */ body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(1), body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(4) { border-top: 5px solid #00ffff; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(2), body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(5) { border-top: 5px solid #ffff00; } body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(3), body.pagina-metodologia #secao-10 .compromisso-itens > span:nth-child(6) { border-top: 5px solid #ff00ff; } /* último princípio como fechamento */ body.pagina-metodologia #secao-10 .compromisso-itens > span:last-child { color: #000000; background: #ffff00; border-color: #ffff00; } body.pagina-metodologia #secao-10 .compromisso-itens > span:last-child::before { color: #000000; } /* ========================================================= 8. MOBILE ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia #secao-10 .limites-topo { grid-template-columns: 1fr; } body.pagina-metodologia #secao-10 .limites-topo > strong { font-size: 29px; } body.pagina-metodologia #secao-10 .limites-grade { grid-template-columns: repeat(2, minmax(0,1fr)); } body.pagina-metodologia #secao-10 .continuidade-fluxo::after { display: none; } body.pagina-metodologia #secao-10 .continuidade-fluxo > div { flex-direction: column; align-items: stretch; } body.pagina-metodologia #secao-10 .continuidade-fluxo strong { flex: auto; width: 100%; } body.pagina-metodologia #secao-10 .continuidade-fluxo i { min-height: 30px; transform: rotate(90deg); } body.pagina-metodologia #secao-10 .continuidade-fluxo i:last-child { transform: none; min-height: 38px; } body.pagina-metodologia #secao-10 .participacao-metodo { grid-template-columns: 1fr; } body.pagina-metodologia #secao-10 .participacao-metodo > div { grid-column: 1; grid-row: auto; } body.pagina-metodologia #secao-10 .participacao-metodo > p { grid-column: 1; } body.pagina-metodologia #secao-10 .compromisso-final > h3 { font-size: 38px; } body.pagina-metodologia #secao-10 .compromisso-itens { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 430px) { body.pagina-metodologia #secao-10 .limites-grade { grid-template-columns: 1fr; } body.pagina-metodologia #secao-10 .limites-grade > span { min-height: 105px; } body.pagina-metodologia #secao-10 .participacao-metodo > div h3 { font-size: 31px; } body.pagina-metodologia #secao-10 .compromisso-final { padding: 28px 20px 22px; } body.pagina-metodologia #secao-10 .compromisso-final::after { display: none; } body.pagina-metodologia #secao-10 .compromisso-final > h3 { font-size: 34px; } body.pagina-metodologia #secao-10 .compromisso-itens { grid-template-columns: 1fr; } body.pagina-metodologia #secao-10 .compromisso-itens > span { min-height: 100px; } } /* ========================================================= 17F — ENCERRAMENTO DA METODOLOGIA FICHA + CONSIDERAÇÕES FINAIS + RODAPÉ ========================================================= */ /* ========================================================= 1. FICHA METODOLÓGICA ========================================================= */ body.pagina-metodologia .ficha-metodologica { position: relative; margin: 54px 0 0; overflow: hidden; background: #000000; border: 1px solid #000000; border-top: 7px solid #00ffff; scroll-margin-top: 155px; } /* ========================================================= 2. CABEÇALHO DA FICHA ========================================================= */ body.pagina-metodologia .ficha-metodologica-topo { display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: stretch; background: #000000; } body.pagina-metodologia .ficha-metodologica-topo > span { display: flex; align-items: center; padding: 27px 24px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1px; } body.pagina-metodologia .ficha-metodologica-topo > h2 { display: flex; align-items: center; margin: 0; padding: 25px 28px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 43px; font-weight: 900; line-height: .94; } /* ========================================================= 3. GRADE DE METADADOS ========================================================= */ body.pagina-metodologia .ficha-metodologica-grade { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: #666666; } body.pagina-metodologia .ficha-metodologica-grade > div { position: relative; min-height: 145px; padding: 28px 23px 22px; overflow: hidden; background: #ffffff; } /* códigos cromáticos */ body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(1), body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(2), body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(3) { border-top: 5px solid #00ffff; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(4), body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(5) { border-top: 5px solid #ffff00; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(6), body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(7) { border-top: 5px solid #ff00ff; } /* última informação ocupa a largura inteira */ body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(7) { grid-column: 1 / -1; min-height: 125px; background: #f5f5f5; } /* numeração técnica */ body.pagina-metodologia .ficha-metodologica-grade > div::after { position: absolute; top: 20px; right: 20px; color: #bbbbbb; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(1)::after { content: "01"; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(2)::after { content: "02"; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(3)::after { content: "03"; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(4)::after { content: "04"; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(5)::after { content: "05"; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(6)::after { content: "06"; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(7)::after { content: "07"; } /* ========================================================= 4. LABEL DOS METADADOS ========================================================= */ body.pagina-metodologia .ficha-metodologica-grade small { display: block; max-width: calc(100% - 45px); margin-bottom: 10px; color: #777777; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 1px; } /* ========================================================= 5. VALOR PRINCIPAL ========================================================= */ body.pagina-metodologia .ficha-metodologica-grade strong { display: block; margin-bottom: 8px; color: #000000; font-family: var(--gp-fonte-titulo); font-size: 29px; font-weight: 900; line-height: .98; } /* ========================================================= 6. INFORMAÇÃO SECUNDÁRIA ========================================================= */ body.pagina-metodologia .ficha-metodologica-grade span { display: block; color: #444444; font-family: var(--gp-fonte-texto); font-size: 14.5px; line-height: 1.5; } /* ========================================================= 7. FECHO DA FICHA ========================================================= */ body.pagina-metodologia .ficha-metodologica-fecho { display: grid; grid-template-columns: 245px minmax(0,1fr); background: #000000; border-top: 6px solid #ff00ff; } body.pagina-metodologia .ficha-metodologica-fecho > span { display: flex; align-items: center; padding: 24px; color: #000000; background: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .7px; } body.pagina-metodologia .ficha-metodologica-fecho > p { display: flex; align-items: center; margin: 0; padding: 25px 28px; color: #eeeeee; background: #000000; font-family: var(--gp-fonte-texto); font-size: 15px; line-height: 1.65; } /* ========================================================= 8. LINK DA FICHA NO ÍNDICE ========================================================= */ body.pagina-metodologia .sumario-ficha { text-decoration: none; cursor: pointer; } /* ========================================================= 9. CONSIDERAÇÕES FINAIS ========================================================= */ body.pagina-metodologia .encerramento-metodologia { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 38px; padding: 70px 28px 28px; overflow: hidden; text-align: left; color: #ffffff; background-color: #000000; background-image: linear-gradient( rgba(0,255,255,.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0,255,255,.05) 1px, transparent 1px ); background-size: 30px 30px; border: 0; border-top: 7px solid #ffff00; border-radius: 0; } /* assinatura */ body.pagina-metodologia .encerramento-metodologia::before { content: "ENCERRAMENTO // METODOLOGIA"; position: absolute; top: 24px; left: 28px; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 1.1px; } /* ========================================================= 10. TÍTULO FINAL ========================================================= */ body.pagina-metodologia .encerramento-metodologia h2 { grid-column: 1 / -1; margin: 0 0 17px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: clamp(48px, 6vw, 67px); font-weight: 900; line-height: .9; } /* ========================================================= 11. TRÊS CONSIDERAÇÕES ========================================================= */ body.pagina-metodologia .encerramento-metodologia > p { max-width: none; margin: 0; padding: 23px 21px; color: #eeeeee; background: rgba(17,17,17,.96); border: 1px solid #444444; font-family: var(--gp-fonte-texto); font-size: 16px; line-height: 1.7; } body.pagina-metodologia .encerramento-metodologia > p:nth-of-type(1) { border-top: 5px solid #00ffff; } body.pagina-metodologia .encerramento-metodologia > p:nth-of-type(2) { border-top: 5px solid #ffff00; } body.pagina-metodologia .encerramento-metodologia > p:nth-of-type(3) { border-top: 5px solid #ff00ff; } /* ========================================================= 12. FRASE-MANIFESTO FINAL ========================================================= */ body.pagina-metodologia .frase-final { grid-column: 1 / -1; max-width: none; margin: 12px 0 0; padding: 31px 34px; color: #000000; background: #ffff00; border: 0; border-top: 7px solid #ff00ff; border-radius: 0; font-family: var(--gp-fonte-texto); font-size: 21px; font-style: italic; font-weight: 600; line-height: 1.62; text-align: left; } /* ========================================================= 13. RODAPÉ — ASSINATURA DA PLATAFORMA ========================================================= */ body.pagina-metodologia .rodape-site { position: relative; margin-top: 72px; padding: 46px 0 48px; color: #cccccc; background: #000000; border-top: 7px solid #00ffff; } /* ========================================================= 14. CONTEÚDO DO RODAPÉ ========================================================= */ body.pagina-metodologia .rodape-conteudo { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 50px; width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding-top: 31px; } /* pequeno identificador */ body.pagina-metodologia .rodape-conteudo::before { content: "PLATAFORMA DIGITAL // CARTOGRAFIA DA MEMÓRIA NEGRA"; position: absolute; top: 0; left: 0; color: #00ffff; font-family: var(--gp-fonte-titulo); font-size: 9px; font-weight: 900; letter-spacing: 1px; } /* ========================================================= 15. NOME DA PLATAFORMA ========================================================= */ body.pagina-metodologia .rodape-site strong { display: block; margin-bottom: 10px; color: #ffff00; font-family: var(--gp-fonte-titulo); font-size: 30px; font-weight: 900; line-height: .95; } /* ========================================================= 16. TEXTO DO RODAPÉ ========================================================= */ body.pagina-metodologia .rodape-site p { max-width: 720px; margin: 4px 0 0; color: #cccccc; font-family: var(--gp-fonte-texto); font-size: 14px; line-height: 1.65; } /* ========================================================= 17. LINKS DO RODAPÉ ========================================================= */ body.pagina-metodologia .rodape-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } body.pagina-metodologia .rodape-links a { display: flex; align-items: center; justify-content: center; min-width: 78px; padding: 9px 13px; color: #ffffff; background: #111111; border: 1px solid #555555; font-family: var(--gp-fonte-titulo); font-size: 16px; font-weight: 900; line-height: 1; text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } body.pagina-metodologia .rodape-links a:hover { color: #000000; background: #ffff00; border-color: #ffff00; } /* ========================================================= 18. MOBILE ========================================================= */ @media (max-width: 720px) { body.pagina-metodologia .ficha-metodologica { margin-top: 45px; } body.pagina-metodologia .ficha-metodologica-topo { grid-template-columns: 1fr; } body.pagina-metodologia .ficha-metodologica-topo > span { padding: 21px 20px 9px; } body.pagina-metodologia .ficha-metodologica-topo > h2 { padding: 12px 20px 23px; color: #ffffff; background: #000000; font-size: 39px; } body.pagina-metodologia .ficha-metodologica-grade { grid-template-columns: 1fr; } body.pagina-metodologia .ficha-metodologica-grade > div:nth-child(7) { grid-column: auto; } body.pagina-metodologia .ficha-metodologica-grade > div { min-height: 0; padding: 23px 20px; } body.pagina-metodologia .ficha-metodologica-fecho { grid-template-columns: 1fr; } body.pagina-metodologia .encerramento-metodologia { grid-template-columns: 1fr; padding: 65px 20px 22px; } body.pagina-metodologia .encerramento-metodologia h2 { grid-column: 1; font-size: 48px; } body.pagina-metodologia .frase-final { grid-column: 1; padding: 27px 22px; font-size: 19px; } body.pagina-metodologia .rodape-conteudo { grid-template-columns: 1fr; align-items: start; gap: 28px; width: min(100% - 40px, 1100px); } body.pagina-metodologia .rodape-links { justify-content: flex-start; } } @media (max-width: 430px) { body.pagina-metodologia .ficha-metodologica-topo > h2 { font-size: 35px; } body.pagina-metodologia .ficha-metodologica-grade strong { font-size: 26px; } body.pagina-metodologia .encerramento-metodologia { margin-top: 28px; } body.pagina-metodologia .encerramento-metodologia h2 { font-size: 43px; } body.pagina-metodologia .encerramento-metodologia > p { padding: 21px 18px; font-size: 15.5px; } body.pagina-metodologia .frase-final { font-size: 18px; } body.pagina-metodologia .rodape-site { margin-top: 48px; padding: 40px 0 42px; } body.pagina-metodologia .rodape-links { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; } body.pagina-metodologia .rodape-links a { min-width: 0; } } /* ===================================================== 18F — RODAPÉ OFICIAL DA PLATAFORMA MESMO COMPONENTE DA PÁGINA SOBRE ===================================================== */ body.pagina-metodologia .rodape-site { position: relative; overflow: hidden; margin-top: 72px; padding: 0; color: #ffffff; background: linear-gradient( rgba(0, 255, 255, 0.028) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 255, 255, 0.028) 1px, transparent 1px ), linear-gradient( 145deg, #030303 0%, #0d0d0d 100% ); background-size: 30px 30px, 30px 30px, auto; border-top: 5px solid var(--gp-amarelo); } /* detalhe gráfico */ body.pagina-metodologia .rodape-site::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 190px; height: 190px; border: 1px solid rgba(255, 0, 255, 0.18); transform: rotate(45deg); pointer-events: none; } /* ===================================================== CONTEÚDO PRINCIPAL ===================================================== */ body.pagina-metodologia .rodape-conteudo { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr); gap: 70px; align-items: start; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 58px 0 46px; } /* ===================================================== MARCA ===================================================== */ body.pagina-metodologia .rodape-marca { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 30px; align-items: start; } body.pagina-metodologia .logo-galeria-rodape { display: block; width: 175px; max-width: 100%; height: auto; } /* ===================================================== IDENTIDADE ===================================================== */ body.pagina-metodologia .rodape-kicker { display: block; margin-bottom: 12px; color: var(--gp-ciano); font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; } body.pagina-metodologia .rodape-identidade strong { display: block; margin: 0 0 14px; color: #ffffff; font-family: var(--gp-fonte-titulo); font-size: 34px; font-weight: 900; line-height: 1; } body.pagina-metodologia .rodape-identidade p { max-width: 650px; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.67); background: transparent; border: 0; font-family: var(--gp-fonte-texto); font-size: 14px; line-height: 1.7; } /* ===================================================== NAVEGAÇÃO ===================================================== */ body.pagina-metodologia .rodape-navegacao { position: relative; z-index: 2; } body.pagina-metodologia .rodape-label { display: block; margin-bottom: 17px; color: var(--gp-ciano); font-family: var(--gp-fonte-titulo); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; } body.pagina-metodologia .rodape-links { display: flex; flex-direction: column; gap: 0; border-top: 1px solid #292929; } body.pagina-metodologia .rodape-links a { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 5px; color: #ffffff; background: transparent; font-family: var(--gp-fonte-titulo); font-size: 18px; font-weight: 800; text-decoration: none; border: 0; border-bottom: 1px solid #292929; transition: color .25s ease, padding-left .25s ease, background .25s ease; } body.pagina-metodologia .rodape-links a span { color: var(--gp-amarelo); font-size: 11px; font-weight: 900; letter-spacing: 1px; } body.pagina-metodologia .rodape-links a:hover, body.pagina-metodologia .rodape-links a:focus-visible { padding-left: 12px; color: var(--gp-ciano); background: rgba(0, 255, 255, 0.035); outline: none; } /* ===================================================== BASE ===================================================== */ body.pagina-metodologia .rodape-base { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 25px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 18px 0 24px; color: #747474; font-family: var(--gp-fonte-titulo); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; border-top: 1px solid #292929; } body.pagina-metodologia .rodape-base span:first-child { color: var(--gp-amarelo); } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 720px) { body.pagina-metodologia .rodape-conteudo { grid-template-columns: 1fr; gap: 42px; width: min(100% - 36px, 1180px); padding: 44px 0 38px; } body.pagina-metodologia .rodape-marca { grid-template-columns: 1fr; gap: 26px; } body.pagina-metodologia .logo-galeria-rodape { width: 150px; } body.pagina-metodologia .rodape-identidade strong { font-size: 31px; } body.pagina-metodologia .rodape-navegacao { width: 100%; } body.pagina-metodologia .rodape-base { flex-direction: column; align-items: flex-start; width: min(100% - 36px, 1180px); gap: 7px; padding: 18px 0 24px; } } /* ===================================================== 18G — CORREÇÃO FINAL DO RODAPÉ REMOVE CONFLITOS DOS ESTILOS ANTIGOS ===================================================== */ /* ----------------------------------------------------- REMOVE O TEXTO EXTRA NO TOPO DO RODAPÉ ----------------------------------------------------- */ body.pagina-metodologia .rodape-conteudo::before { content: none !important; display: none !important; } /* ----------------------------------------------------- RESETA COMPLETAMENTE O CONTAINER DOS LINKS ----------------------------------------------------- */ body.pagina-metodologia .rodape-links { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; width: 100%; border-top: 1px solid #292929; } /* ----------------------------------------------------- ALINHA OS LINKS À ESQUERDA COMO NO SOBRE ----------------------------------------------------- */ body.pagina-metodologia .rodape-links a { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; min-width: 0; padding: 13px 5px; color: #ffffff; background: transparent; border: 0; border-bottom: 1px solid #292929; text-align: left; } /* ----------------------------------------------------- GARANTE POSIÇÃO CORRETA DOS NÚMEROS ----------------------------------------------------- */ body.pagina-metodologia .rodape-links a span { display: inline-block; flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 0; text-align: left; }