/* ========================================================================== Grupo Pacto: estilos do layout comum (cabeçalho, navegação de RI, rodapé, abas do DNA e formulários). Todas as páginas carregam este arquivo pelo bloco comum do (_layout/head.html). O item ativo do menu vem do atributo da página, sem JavaScript: ========================================================================== */ [hidden] { display: none !important; } /* Sem JavaScript, as abas mostram todos os painéis em sequência. */ html:not(.js) [role="tabpanel"][hidden] { display: block !important; } /* Cabeçalho ------------------------------------------------------------- */ .ph-spacer { height: 72px; } .ph { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ds-z-header); background: #FFFFFF; border-bottom: 1px solid var(--ds-border); } .ph-inner { max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); height: 72px; display: flex; align-items: stretch; gap: 8px; } .ph-logo { display: flex; align-items: center; flex: 0 0 auto; padding-right: clamp(14px, 3vw, 36px); text-decoration: none; } .ph-logo img { display: block; height: 30px; width: auto; } .ph-nav { display: flex; align-items: stretch; } .ph-link { position: relative; display: flex; align-items: center; gap: 7px; height: 72px; padding: 0 clamp(10px, 1.1vw, 16px); font: 600 14.5px/1 Manrope, sans-serif; letter-spacing: -0.005em; color: #2D2D2D; text-decoration: none; background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease; } .ph-link:hover { background: #F5F5F5; color: #2D2D2D; } .ph-mark { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #F26F21; display: none; } [data-nav="inicio"] [data-nav-item="inicio"] .ph-mark, [data-nav="institucional"] [data-nav-item="institucional"] .ph-mark, [data-nav="investidores"] [data-nav-item="investidores"] .ph-mark { display: block; } .ph-dd { position: relative; display: flex; align-items: stretch; } .ph-caret { flex: 0 0 auto; opacity: 0.55; transition: transform 200ms ease; } .ph-dd.is-open .ph-caret { transform: rotate(180deg); } .ph-panel { position: absolute; top: 72px; left: 0; background: #FFFFFF; border: 1px solid var(--ds-border); border-top: 3px solid #F26F21; padding: 6px 0; box-shadow: 0 16px 32px rgba(45, 45, 45, 0.10); display: flex; flex-direction: column; z-index: var(--ds-z-dropdown); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 160ms ease, visibility 160ms ease; } .ph-dd.is-open .ph-panel, html:not(.js) .ph-dd:hover .ph-panel { opacity: 1; pointer-events: auto; visibility: visible; } .ph-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 18px; border-radius: 8px; font: 500 14px/1.3 Inter, sans-serif; color: #2D2D2D; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; } .ph-item:hover, .ph-m-item:hover, .ph-m-sub:hover { background: #FCE2D3; color: #914314; } .ph-ext { font-size: 11px; opacity: 0.5; flex: 0 0 auto; } .ph-fill { flex: 1 1 auto; } .ph-util { display: flex; align-items: center; align-self: center; gap: clamp(12px, 1.6vw, 22px); flex: 0 0 auto; padding-left: clamp(12px, 2vw, 24px); border-left: 1px solid var(--ds-border); } .ph-util-link { font: 600 11.5px/1 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: #6B6B6B; text-decoration: none; white-space: nowrap; transition: color 160ms ease; } .ph-util-link:hover { color: #F26F21; } .ph-langs { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: 4px; } .ph-lang { min-width: 32px; height: 26px; padding: 0 7px; border: 0; border-radius: 6px; cursor: pointer; font: 700 11px/1 Manrope, sans-serif; letter-spacing: 0.08em; background: transparent; color: var(--ds-text-subtle); transition: background-color 160ms ease, color 160ms ease; } .ph-lang[aria-pressed="true"] { background: #F26F21; color: #FFFFFF; } .ph-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; align-self: center; border: 1px solid var(--ds-border); border-radius: 8px; background: #FFFFFF; cursor: pointer; flex: 0 0 auto; } .ph-burger span { display: block; width: 20px; height: 2px; background: #2D2D2D; transition: transform 220ms ease, opacity 180ms ease; } .ph-drawer-open .ph-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ph-drawer-open .ph-burger span:nth-child(2) { opacity: 0; } .ph-drawer-open .ph-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ph a:focus-visible, .ph button:focus-visible, .ph-drawer a:focus-visible, .ph-drawer button:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: -3px; } /* Menu do celular */ .ph-drawer { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: var(--ds-z-drawer); overflow-y: auto; background: #FFFFFF; border-top: 1px solid var(--ds-border); display: none; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; } .ph-drawer-open .ph-drawer { opacity: 1; pointer-events: auto; visibility: visible; } .ph-drawer nav { display: flex; flex-direction: column; padding: 0 0 28px; } .ph-m-item { display: flex; align-items: center; min-height: 56px; padding: 0 clamp(16px, 4vw, 32px); border-bottom: 1px solid var(--ds-border-subtle); font: 700 16px/1.3 Manrope, sans-serif; color: #2D2D2D; text-decoration: none; } .ph-m-group { display: flex; align-items: flex-end; min-height: 48px; padding: 22px clamp(16px, 4vw, 32px) 8px; font: 700 11px/1 Manrope, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; color: #F26F21; } .ph-m-sub { display: flex; align-items: center; min-height: 48px; padding: 0 clamp(16px, 4vw, 32px); border-bottom: 1px solid var(--ds-border-subtle); font: 400 15px/1.3 Inter, sans-serif; color: #4A4A4A; text-decoration: none; } .ph-m-langs { display: flex; align-items: center; gap: 8px; padding: 22px clamp(16px, 4vw, 32px) 0; } .ph-m-lang { min-width: 56px; height: 44px; padding: 0 14px; border-radius: 8px; cursor: pointer; font: 700 13px/1 Manrope, sans-serif; letter-spacing: 0.08em; border: 1px solid var(--ds-border); background: #FFFFFF; color: #4A4A4A; } .ph-m-lang[aria-pressed="true"] { border-color: #F26F21; background: #F26F21; color: #FFFFFF; } @media (max-width: 1180px) { .ph-nav, .ph-util { display: none; } .ph-burger { display: flex; } .ph-drawer { display: block; } } /* Navegação de Relações com Investidores ------------------------------------ */ .rn { position: sticky; top: 72px; z-index: 40; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); } .rn-inner { max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); display: flex; align-items: stretch; overflow-x: auto; } .rn-link { display: flex; align-items: center; height: 56px; padding: 0 clamp(12px, 1.4vw, 20px); white-space: nowrap; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; border-bottom: 3px solid transparent; font: 500 14px/1 Manrope, sans-serif; color: var(--ds-text-subtle); } .rn-link:hover { color: var(--pacto-brown); background: var(--ds-surface-alt); } [data-ri="hub"] [data-ri-item="hub"], [data-ri="financeiras"] [data-ri-item="financeiras"], [data-ri="mercado"] [data-ri-item="mercado"], [data-ri="sustentabilidade"] [data-ri-item="sustentabilidade"], [data-ri="energiapr"] [data-ri-item="energiapr"], [data-ri="mux"] [data-ri-item="mux"], [data-ri="apresentacao"] [data-ri-item="apresentacao"] { border-bottom-color: var(--pacto-orange); font-weight: 700; color: var(--pacto-brown); } .rn-link:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: -3px; } /* Rodapé ---------------------------------------------------------------- */ .pft { background: var(--ds-surface-paper); border-top: 1px solid var(--ds-border-warm); font-family: var(--ds-font-body); } .pft__top { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); padding-block: clamp(44px, 5vw, 72px) clamp(32px, 3.6vw, 48px); border-bottom: 1px solid var(--ds-border-warm); } .pft__brand { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .pft__brand img { display: block; width: 150px; height: auto; } .pft__legal { margin: 0; max-width: 32ch; font: 400 14px/1.7 var(--ds-font-body); color: var(--ds-text-muted); } .pft__social { display: flex; flex-wrap: wrap; gap: 8px; } .pft__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ds-border-warm); border-radius: var(--ds-radius); background: var(--ds-surface); color: var(--pacto-brown); transition: background-color var(--ds-dur-fast) ease, color var(--ds-dur-fast) ease, border-color var(--ds-dur-fast) ease; } .pft__social svg { width: 16px; height: 16px; display: block; fill: currentColor; } .pft__social a:hover { background: var(--pacto-brown); border-color: var(--pacto-brown); color: var(--pacto-white); } .pft__navs { display: grid; gap: 24px clamp(20px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); min-width: 0; } .pft__nav { display: flex; flex-direction: column; min-width: 0; } .pft__h { margin: 0 0 8px; font: 700 11px/1.4 var(--ds-font-display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--pacto-brown); } .pft__nav a, .pft__contact { display: inline-flex; align-items: center; min-height: 40px; font: 400 14.5px/1.4 var(--ds-font-body); color: var(--ds-text); text-decoration: none; transition: color var(--ds-dur-fast) ease; } .pft__nav a:hover, .pft__contact:hover { color: var(--pacto-brown); text-decoration: underline; text-underline-offset: 4px; } .pft__addr { display: grid; gap: 24px clamp(20px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); padding-block: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--ds-border-warm); } .pft__addr > div { min-width: 0; } .pft__addr p { margin: 0 0 4px; font: 400 13.5px/1.65 var(--ds-font-body); color: var(--ds-text-muted); } .pft__addr .pft__h { margin: 0 0 8px; font: 700 11px/1.4 var(--ds-font-display); color: var(--pacto-brown); } .pft__contact { min-height: 36px; font-weight: 500; font-size: 13.5px; } .pft__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 20px 26px; } .pft__bottom p { margin: 0; font: 400 13px/1.6 var(--ds-font-body); color: var(--ds-text-subtle); } .pft__bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; } .pft__tagline { font: 700 13.5px/1.3 var(--ds-font-display); letter-spacing: -0.005em; color: var(--pacto-brown); } .pft__endorse, .pft__privacy { display: inline-flex; align-items: center; min-height: 40px; font: 600 12px/1 var(--ds-font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pacto-brown); text-decoration: none; } .pft__endorse:hover, .pft__privacy:hover { text-decoration: underline; text-underline-offset: 4px; } .pft a:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; } @media (max-width: 900px) { .pft__top { grid-template-columns: minmax(0, 1fr); } } /* DNA P.A.C.T.O. (home e Sobre) --------------------------------------------- */ .dna-tab { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px; cursor: pointer; text-align: left; font: 500 14.5px/1.3 Inter, sans-serif; border: 0; border-bottom: 1px solid var(--ds-border-subtle); border-left: 3px solid transparent; background: var(--ds-surface); color: var(--ds-text-muted); transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .dna-tab[aria-selected="true"] { border-left-color: var(--pacto-orange); background: var(--pacto-cream); color: var(--pacto-brown); } .dna-tab__l { font: 800 15px/1 Manrope, sans-serif; width: 18px; } /* Formulários (Contato e Canal de Ética) ------------------------------------ */ .pf { min-width: 0; background: #FFFFFF; border: 1px solid var(--ds-border); padding: clamp(24px, 2.8vw, 40px); display: flex; flex-direction: column; gap: 18px; } .pf-field { display: flex; flex-direction: column; gap: 8px; } .pf-label { font: 600 13px/1.3 Inter, sans-serif; color: var(--ds-text); } .pf-opt { font: 400 12.5px/1 Inter, sans-serif; color: var(--ds-text-subtle); } .pf-help { margin: 0; font: 400 13px/1.55 Inter, sans-serif; color: var(--ds-text-subtle); } .pf-input { min-height: 52px; padding: 0 16px; border: 1px solid var(--ds-border-strong); border-radius: 0; background: #FFFFFF; font: 400 15.5px/1.3 Inter, sans-serif; color: #2D2D2D; } .pf-textarea { padding: 14px 16px; border: 1px solid var(--ds-border-strong); border-radius: 0; background: #FFFFFF; font: 400 15.5px/1.6 Inter, sans-serif; color: #2D2D2D; resize: vertical; } .pf-input:focus-visible, .pf-textarea:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; } .pf-btn { min-height: 54px; padding: 0 28px; border-radius: 8px; background: #F26F21; border: 1px solid #F26F21; color: #FFFFFF; font: 700 15px/1 Manrope, sans-serif; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; } .pf-btn:hover { background: #914314; border-color: #914314; } .pf-btn:disabled { opacity: 0.7; cursor: wait; } .pf-btn:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; } .pf-note { margin: 0; font: 400 13px/1.6 Inter, sans-serif; color: var(--ds-text-subtle); } .pf-status { margin: 0; padding: 14px 18px; font: 500 14.5px/1.6 Inter, sans-serif; border-left: 3px solid transparent; } .pf-status:empty { display: none; } .pf-status[data-estado="ok"] { background: #FCE2D3; border-left-color: #F26F21; color: #914314; } .pf-status[data-estado="erro"] { background: #FDECEC; border-left-color: #C62828; color: #8E1C1C; } .pf-protocolo { display: block; margin-top: 6px; font: 800 18px/1.3 Manrope, sans-serif; letter-spacing: 0.04em; color: #2D2D2D; } /* Campo-armadilha contra robôs: invisível para pessoas. */ .pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }