/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*
 * Fallback métrico da Petrobras Sans (01/10/2026, revisão da Adobe:
 * Web Performance / CLS). Mora AQUI, e não no fonts.css: no celular o
 * fonts.css só chega na fase lazy, e a regra de fallback precisa existir
 * antes do primeiro desenho, senão a própria troca de fonte desloca o layout.
 * Números tirados dos TTF da Petrobras Sans (upm 1000, hhea 1049/-265) e da
 * razão de largura contra a Arial (Liberation Sans, métrica idêntica) num
 * texto institucional em português: regular 96,29%, negrito 92,10%.
 *   ascent-override  = 1,049 / size-adjust
 *   descent-override = 0,265 / size-adjust
 */
@font-face {
  font-family: 'Petrobras Sans-fallback';
  font-style: normal;
  font-weight: 400;
  size-adjust: 96.29%;
  ascent-override: 108.95%;
  descent-override: 27.52%;
  line-gap-override: 0%;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
}

@font-face {
  font-family: 'Petrobras Sans-fallback';
  font-style: normal;
  font-weight: 700;
  size-adjust: 92.1%;
  ascent-override: 113.89%;
  descent-override: 28.77%;
  line-gap-override: 0%;
  src: local('Arial Bold'), local('Arial'), local('Helvetica Bold'), local('Liberation Sans Bold');
}

:root {
  /*
   * ============================================================
   * TEMA DA FAMÍLIA INSTITUCIONAL — valores medidos na produção.
   * Estes são os PADRÕES da família. A cor de cada site entra por
   * styles/tokens.css, carregado no <head> depois deste arquivo.
   * NÃO edite cores aqui para um site específico: este arquivo é
   * byte-idêntico nos 7 e é sobrescrito pela propagação.
   * ============================================================
   */

  /* identidade visual (padrão da família; override em tokens.css) */
  --color-primary: #3ddaff;
  --color-primary-dark: #2c9eb9;
  --color-primary-darker: #1e6d80;
  --color-accent: #fdc82f;
  --color-accent-dark: #e0a800;

  /* colors (medidos na produção) */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #272833;
  --heading-color: #373737;
  --link-color: #1e6d80;
  --link-hover-color: #14505e;

  /* header/footer */
  --header-background: #f8f8f8;
  --header-border-color: #e7e7ed;

  /* medido em 20/09 na producao dos dois sites ja conferidos: o rodape do
     Canal Fornecedor e' BRANCO e so' a faixa legal do fim e' #f8f8f8; o do
     Comunica ES e' branco inteiro. O #f8f8f8 aqui pintava o rodape todo e
     respondia pelos dois maiores achados do s11 (57+57 rotas) e por 99 do s09. */
  --footer-background: #fff;
  --footer-color: #272833;

  /* fonts (produção usa Trebuchet MS, fonte de sistema) */
  --body-font-family: 'Trebuchet MS', 'Segoe UI', tahoma, sans-serif;
  --heading-font-family: 'Trebuchet MS', 'Segoe UI', tahoma, sans-serif;

  /* body sizes (produção: 14px / 21px) — em rem para os botões A+/A- funcionarem */
  --body-font-size-m: 0.875rem;   /* 14px */
  --body-font-size-s: 0.8125rem;  /* 13px */
  --body-font-size-xs: 0.75rem;   /* 12px */

  /* heading sizes (produção: h2 de seção = 32px) — em rem (ver A+/A- no fim do arquivo) */
  --heading-font-size-xxl: 2rem;     /* 32px */
  --heading-font-size-xl: 2rem;      /* 32px */
  --heading-font-size-l: 1.5rem;     /* 24px */
  --heading-font-size-m: 1.25rem;    /* 20px */
  --heading-font-size-s: 1.125rem;   /* 18px */
  --heading-font-size-xs: 1rem;      /* 16px */

  /* layout (produção: coluna de conteúdo de 704px) */
  --content-max-width: 704px;
  --wide-max-width: 1264px;

  /* nav height (produção: 76px) */
  --nav-height: 76px;
  --header-height: var(--nav-height);
}

/* base do A+/A-: 100% respeita o tamanho de fonte do navegador do usuário */
html {
  font-size: 100%;
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.5;
}

body.appear {
  display: block;
}

header {
  height: var(--header-height);
}

/* pagina de fragmento (nav ou rodape): a peca que nao e a desta pagina nao e
   carregada, entao o elemento fica vazio e nao deve reservar espaco */
header:not(:has(*)),
footer:not(:has(*)) {
  display: none;
}

/* 01/10/2026: só a página que É fragmento esconde o cabeçalho vazio. Nas
   outras, o cabeçalho ainda vazio (o bloco monta na fase lazy) reserva a
   altura dele desde o primeiro desenho; antes o main nascia no topo e descia
   152px quando o cabeçalho chegava (CLS 0,11-0,13 no s09, página sem banner) */
html:not(:has(meta[name='fragmento'])) header:not(:has(*)) {
  display: block;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  font-family: var(--heading-font-family);
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
  scroll-margin: 140px;
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links (produção: teal #1e6d80 sublinhado) */
a:any-link {
  color: var(--link-color);
  text-decoration: underline;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font: inherit;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

a.button.primary,
button.button.primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--background-color);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-dark);
  color: #fff;
}

a.button.secondary,
button.button.secondary {
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--dark-color);
  background-color: var(--light-color);
  color: var(--dark-color);
}

/*
 * Sem `width: auto` (01/10/2026). O boilerplate traz as três linhas, mas o
 * `width: auto` anula a largura que o atributo `width` da imagem declara, e a
 * imagem que ainda não chegou fica sem tamanho e desloca o que vem embaixo
 * quando carrega. Sem ele, o atributo (que a entrega escreve com as medidas
 * reais do arquivo) reserva o espaço e a imagem carregada fica do mesmo
 * tamanho. Desvio consciente do boilerplate da Adobe, alinhado ao que a
 * própria Adobe pede na Solution Optimization Review: dimensões para
 * reservar espaço. Mesmo ajuste do projeto da Prodesp (30/09).
 */
main img {
  max-width: 100%;
  height: auto;
}

/* texto só para leitor de tela (01/10/2026): o nome acessível completo de
   controles cujo texto visível é um símbolo (A+, A-). O símbolo fica com
   aria-hidden e o nome vem daqui, sem aria-label sobrescrevendo o que se vê
   (label-content-name-mismatch do Lighthouse). */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections (produção: coluna central de 640px) */
main > .section {
  margin: 48px 0;
}

main > .section > div {
  max-width: var(--content-max-width);
  margin: auto;
  padding: 0 24px;
}

main > .section:first-of-type {
  margin-top: 0;
  margin-bottom: 0;
}

/* section metadata — os valores que o autor escolhe no campo Style do modelo
   `section`. Regra da revisao de 10/09: o que o CSS honra aqui, o autor
   alcanca no Universal Editor. `light` fica como apelido legado de
   `highlight` para conteudo ja migrado; nao e' oferecido como opcao nova. */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

/* campo "Fundo da secao" (data-fundo): faixa de cor de ponta a ponta, como o
   "bloco destaque" da producao (highlight-block-color-gray / -green). La' a
   faixa nao tem respiro proprio: o fragmento de texto dentro dela e' que tem
   40px em cima e embaixo. Medido em /transicao-energetica (06/10, 1440 a 390):
   texto a 38px do topo da faixa e 43px do fim; a secao vizinha fica a 43px
   acima e 38px abaixo — os mesmos 40px de cada lado. */
main > .section[data-fundo] {
  margin: 0;
  padding: 40px 0;
  background-color: var(--fundo-secao);
}

main > .section[data-fundo] > div:first-child > :first-child {
  margin-top: 0;
}

main > .section[data-fundo] > div:last-child > :last-child {
  margin-bottom: 0;
}

/* Faixa continua: duas secoes vizinhas com o MESMO fundo sao um fragmento so'
   na producao. Quando a primeira e' so' texto e a segunda abre com as abas
   verticais ou com o catalogo, o vao e' o de dentro do fragmento (40), nao
   40 + 40. Medido em 16/10/2026: texto -> abas = 40 em /quem-somos/gas e
   /quem-somos/fertilizantes (com a secao a parte dava 80); texto -> catalogo
   = 48 em /quem-somos/produtos. NAO vale para cartoes nem titulos: ali a
   producao mantem 80 (/sustentabilidade/cultural, responsabilidade-social). */
main > .section[data-fundo='cinza']:has(> .default-content-wrapper:last-child) + .section[data-fundo='cinza']:has(> :is(.abas-verticais-wrapper, .catalogo-wrapper):first-child),
main > .section[data-fundo='cinza-medio']:has(> .default-content-wrapper:last-child) + .section[data-fundo='cinza-medio']:has(> :is(.abas-verticais-wrapper, .catalogo-wrapper):first-child),
main > .section[data-fundo='verde']:has(> .default-content-wrapper:last-child) + .section[data-fundo='verde']:has(> :is(.abas-verticais-wrapper, .catalogo-wrapper):first-child),
main > .section[data-fundo='azul']:has(> .default-content-wrapper:last-child) + .section[data-fundo='azul']:has(> :is(.abas-verticais-wrapper, .catalogo-wrapper):first-child) {
  padding-top: 0;
}

main > .section:has(+ .section[data-fundo]) {
  margin-bottom: 40px;
}

main > .section[data-fundo] + .section {
  margin-top: 40px;
}

/* Respiro largo (estilos de secao, item E 18/10): algumas faixas da producao
   usam o fragmento de destaque com 40 a mais em cima (80 do topo da faixa ao
   titulo, de 1440 a 390: /biodiversidade, /sustentabilidade/biodiversidade e
   /en, "Circular economy" de /en/sustentabilidade/descomissionamento-offshore,
   /quem-somos/jovem-aprendiz) e, em algumas, 80 a mais embaixo (Circular
   economy, jovem-aprendiz). Decisao do Luciano: nessas rotas, como a producao. */
main > .section[data-fundo].respiro-topo {
  padding-top: 80px;
}

main > .section[data-fundo].respiro-base {
  padding-bottom: 120px;
}

/* estilo `so-ancora` ("So' ancora"): secao vazia que so' leva ancora e rotulo
   da barra de ancoras — na producao duas ancoras podem apontar para o mesmo
   lugar (/quem-somos/logistica: "Roubo nos Dutos" e "Porto" antes de "Base de
   Apoio Offshore de Macae", 08/10/2026). Altura e margens zero, e os vizinhos
   mantem os vaos de quando ela nao existe. */
main > .section.so-ancora:not([data-fundo]) {
  height: 0;
  margin: 0;
  padding: 0;
}

main > .section:has(+ .section.so-ancora + .section[data-fundo]) {
  margin-bottom: 40px;
}

main > .section[data-fundo] + .section.so-ancora + .section {
  margin-top: 40px;
}

/* campo "Processo seletivo" (data-processo): a secao e' um resultado do bloco
   buscador e so' aparece quando a busca a escolhe (blocks/buscador). Fica aqui,
   e nao no CSS do bloco, para nao piscar antes de ele carregar. No Universal
   Editor todas aparecem (processo-no-editor). Medido em 09/10/2026 em
   /quem-somos/jovem-aprendiz: conteudo recuado 16 (32 abaixo de 768), 80px
   abaixo da linha de filtros. */
main > .section[data-processo]:not(.processo-ativo, .processo-no-editor) {
  display: none;
}

/* :root + .section.section: vence a calha do tema abaixo de 768 */
:root main > .section.section[data-processo] {
  margin: 0;
  padding-top: 30px;
}

main > .section[data-processo] > div {
  max-width: calc(var(--content-max-width) - 32px);
}

/* de 768 a 1023 o recuo da producao e' 24 (16 de 1024 para cima) */
@media (768px <= width < 1024px) {
  main > .section[data-processo] > div {
    max-width: calc(var(--content-max-width) - 48px);
  }
}

/* dois resultados seguidos: 56 do fim de um ao titulo do outro, como dentro
   de um resultado */
:root main > .section.section[data-processo].processo-ativo ~ .processo-ativo {
  padding-top: 51.7px;
}

/* o ultimo resultado mostrado termina 66px acima do titulo seguinte (88 com as
   margens de secao e o ritmo do tema) */
main > .section[data-processo].processo-ativo:not(:has(~ .processo-ativo)) {
  margin-bottom: -22px;
}

/* lista 14/21 e links 18/25,92 em todas as larguras, como os do resultado
   da producao (o vao do titulo fica no tema-corporativo.css) */
main > .section[data-processo] li {
  font-size: 14px;
  line-height: 21px;
}

main > .section[data-processo] :is(ul, ol) {
  margin-bottom: 16px;
}

main > .section[data-processo] p {
  margin-top: 16px;
}

main > .section[data-processo] :is(b, strong) {
  font-weight: 600;
}

main > .section[data-processo] a:any-link {
  font-size: 18px;
  line-height: 25.92px;
}

/* abaixo de 768 nao ha coluna: a calha de 32 do tema vira 64 */
@media (width < 768px) {
  :root main > .section.section[data-processo] {
    padding-top: 46px;
  }

  :root main > .section.section[data-processo] > div {
    padding: 0 64px;
  }
}

/* Duas faixas seguidas (duas secoes com fundo, p. ex. uma com ancora depois
   de outra): na producao sao dois blocos de destaque colados (vao 0 em 20
   pares medidos em 07/10/2026: /sustentabilidade/cultural, /biodiversidade,
   /quem-somos/fertilizantes...). Os 40 de cada lado ja sao o respiro do
   texto dentro de cada faixa; a margem entre secoes abria 40 de branco. */
main > .section[data-fundo]:has(+ .section[data-fundo]) {
  margin-bottom: 0;
}

main > .section[data-fundo] + .section[data-fundo] {
  margin-top: 0;
}

main > .section[data-fundo='cinza'] {
  --fundo-secao: #f8f8f8;
}

main > .section[data-fundo='verde'] {
  --fundo-secao: #00552a;
}

/* "Cinza medio" (highlight-block-color-medium-gray, #eee) e "Azul"
   (highlight-block-color-blue, #006298, texto branco) — medidos em /pre-sal
   ("Bacia de Santos", "Campos de Producao") em 15/10/2026, 1440 a 390 */
main > .section[data-fundo='cinza-medio'] {
  --fundo-secao: #eee;
}

main > .section[data-fundo='azul'] {
  --fundo-secao: #006298;
}

main > .section:is([data-fundo='verde'], [data-fundo='azul'], [data-fundo^='imagem']) > :is(.default-content-wrapper, .columns-wrapper) :is(h1, h2, h3, h4, h5, h6, p, li, a:any-link) {
  color: #fff;
}

/* "Fundo da secao" = Imagem fixa (bloco-de-destaque-midia-fixa da producao,
   /pre-sal, medido 11/10/2026 de 1440 a 390): a foto cobre a tela e fica
   parada enquanto a pagina rola (position fixed recortada pela secao com
   clip-path, o mesmo truque da producao — background-attachment fixed nao
   funciona no Safari do iPhone), sob uma pelicula preta de 48%. Os
   pseudo-elementos nao mexem no :first-child/:last-child das regras acima. */
main > .section[data-fundo^='imagem'] {
  --fundo-secao: transparent;

  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}

main > .section[data-fundo='imagem'] {
  padding-bottom: 56px;
}

/* "Imagem fixa (coluna estreita)": o mesmo fundo com o texto na coluna
   padrao e 80 em cima e embaixo, de 1920 a 360 (/en/sustentabilidade/
   time-petrobras e "Demanda Energetica" do /pre-sal, medidos 12/10/2026) */
main > .section[data-fundo='imagem-coluna'] {
  padding-block: 80px;
}

main > .section[data-fundo^='imagem']::before,
main > .section[data-fundo^='imagem']::after {
  content: '';
  inset: 0;
  pointer-events: none;
}

main > .section[data-fundo^='imagem']::before {
  position: fixed;
  z-index: -2;
  background: var(--fundo-imagem, none) center / cover no-repeat;
}

main > .section[data-fundo^='imagem']::after {
  position: absolute;
  z-index: -1;
  background: rgb(0 0 0 / 48%);
}

/* coluna da producao: grade do Liferay (calha 72, vao 24, conteudo ate 1440).
   A partir de 1024 o texto ocupa as colunas 2 a 11 de 12 — centrado, largura
   (5C - 24)/6; de 768 a 1023, as colunas 2 a 8 de 8 — encostado a direita,
   recuo (C + 24)/8; abaixo de 768, 32 de cada lado. Medido de 1920 a 390:
   x183/1075 a 1440, x148/728 a 1024, x153/543 a 768, x32/326 a 390. */
main > .section[data-fundo='imagem'] > .default-content-wrapper {
  --grade: min(100% - 144px, 1440px);

  box-sizing: border-box;
  width: calc((5 * var(--grade) - 24px) / 6);
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

@media (width < 1024px) {
  main > .section[data-fundo='imagem'] > .default-content-wrapper {
    --grade: calc(100% - 144px);

    width: calc((7 * var(--grade) - 24px) / 8);
    margin-inline: calc(72px + (var(--grade) + 24px) / 8) 72px;
  }
}

@media (width < 768px) {
  main > .section[data-fundo='imagem'] > .default-content-wrapper {
    width: auto;
    margin-inline: 0;
    padding-inline: 32px;
  }
}

/* cada titulo + texto e' uma linha da grade com 16 embaixo e 32 de vao: 48
   entre o ultimo paragrafo e o titulo seguinte e 56 no fim (40 + 16); dentro
   do texto, os paragrafos se separam por uma linha em branco (o texto rico de
   la' termina o paragrafo com <br>: 28,8 a 18/28,8; vale tambem para a
   coluna estreita, "Demanda Energetica" do /pre-sal) */
main > .section[data-fundo='imagem'] > .default-content-wrapper > p {
  margin-block: 0;
}

main > .section[data-fundo^='imagem'] > .default-content-wrapper > p + p {
  margin-top: 28.8px;
}

main > .section[data-fundo='imagem'] > .default-content-wrapper > :is(h2, h3):not(:first-child) {
  margin-top: 48px;
}

/* abaixo de 768 o texto e' 16/25,6: a linha em branco mede 25,6 */
@media (width < 768px) {
  main > .section[data-fundo^='imagem'] > .default-content-wrapper > p + p {
    margin-top: 25.6px;
  }
}

/* a grade da producao tira os 16 de baixo de cada linha quando a pagina
   carrega abaixo de 470 (innerWidth < 470 no JS do fragmento): 32 entre
   os grupos e 40 no fim */
@media (width < 470px) {
  main > .section[data-fundo='imagem'] {
    padding-bottom: 40px;
  }

  main > .section[data-fundo='imagem'] > .default-content-wrapper > :is(h2, h3):not(:first-child) {
    margin-top: 32px;
  }
}

main .section.wide > div {
  max-width: var(--wide-max-width);
}

main .section.centered {
  text-align: center;
}

/* espaçamento entre seções de conteúdo, como na produção */
main .section h2 {
  margin-top: 1.6em;
}

/* Corpo de conteudo. A decisao de 21/09 — seguir a producao — continua valendo;
   o que estava errado era a medida que a alimentou. O comentario anterior dizia
   "16/25,6 medido em 34 rotas": isso e' contagem de ROTAS de um achado, nao o
   corpo do site. Medido de novo em 23/09 pelo metodo de 30/08 (elemento
   visivel, soma por CARACTERES, que e' o que faz o texto de verdade dominar e
   nao um rotulo solto), na producao, a 1440:

     s08 transparencia   18px/28,8  77,7%      s12 agencia    18px/28,8  74,6%
     s09 canalfornecedor 18px/28,8  76,4%      s13 petrobras  18px/28,8  58,4%
     s10 e s11 comunicas 16px/24   100,0%

   Sao duas escadas, e a linha cai no eixo que ja existe: `data-layout`. Lista
   fica em 16px na familia toda — medido no CF em 20/09 (149 ocorrencias em
   16/25,6 contra 8 em 18) e coerente com as comunicas. */
main .section p {
  color: var(--heading-color);
  font-size: 1rem;  /* 16px ate 600 */
  line-height: 1.6; /* 25,6 */
}

/* A escada sobe em 768 — o `md` do Bootstrap, que e' o grid do Liferay da
   producao. Medido em 23/09 nas duas rotas de cada site, por caracteres:
   s08 e s12 dao 16/25,6 a 390 e 600, e 18/28,8 de 768 para cima; o s09 sobe no
   mesmo ponto, de 18 para 20. Um degrau, mesma largura, os tres. */
@media (width >= 768px) {
  main .section p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;    /* 28,8 */
  }
}

main .section ul,
main .section ol {
  color: var(--heading-color);
  font-size: 1rem; /* 16px */
  line-height: 1.6;
}

/* hero sem foto: banner em degradê, como na produção */
main .hero::before {
  /* o gradiente fica atras da imagem do banner (picture usa z-index -1) */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgb(30 109 128) 15%, rgb(61 218 255) 100%);
}

/* ===== menu de âncoras (barra abaixo do hero, como na produção) ===== */
main .anchor-menu {
  position: sticky;
  top: var(--nav-height);
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7ed;
  width: 100%;
  z-index: 1;
}

main .anchor-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  /* 28px entre itens: medido na produção da família. Sem isso os itens ficam
     colados. Conferido em termomacae.com.br/institucional/auditoria (1º item
     em x=84, 2º em x=209) e em pbio.com.br (mesmos seis intervalos). */
  gap: 28px;
  list-style: none;
  max-width: none;
  margin: 0;
  padding: 0 24px;
}

@media (width >= 1200px) {
  main .anchor-menu ul {
    /* 84px: é onde o primeiro item começa na produção (x=84). Com 72 a barra
       inteira ficava 12px à esquerda do original. */
    padding: 0 84px;
  }
}

main .anchor-menu a:any-link {
  display: inline-block;
  padding: 13px 8px 10px;
  border-bottom: 3px solid transparent;
  color: #959595;
  font-size: var(--body-font-size-m);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

main .anchor-menu a:hover {
  color: #010101;
}

main .anchor-menu a.active {
  color: #010101;
  background-color: #eef7fd;
  border-bottom-color: #7fc8ef;
}

/* ===== acessibilidade: alto contraste e tamanho de fonte =====
   controlados pelos botões do header (header.js).
   Versão completa promovida do pbio-eds-v2 em 20/08/2026: preto puro de fundo
   com texto branco (21:1) e links amarelos sublinhados (19,6:1), cobrindo
   cabeçalho, hero, menu de âncoras, conteúdo, formulários e rodapé. Antes
   desta promoção só o pbio tinha o modo completo; os outros seis tinham uma
   versão parcial, presa a !important e sem tratamento de foco e formulários. */

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) {
  --color-primary: #ff0;

  /* faltava: o menu lateral da LAI e outros gabaritos usam --heading-color,
     que ficava em #373737 e sumia no fundo preto */
  --heading-color: #fff;
  --color-primary-dark: #ff0;
  --color-primary-darker: #ff0;
  --background-color: #000;
  --text-color: #fff;
  --link-color: #ff0;
  --link-hover-color: #fff;
  --light-color: #000;
  --dark-color: #fff;
  --header-color: #fff;
  --footer-bg: #000;
  --footer-color: #fff;

  background-color: #000;
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .section,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) footer,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) footer .footer,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .anchor-menu,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .hero,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .hero > div {
  background: #000;
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .hero::before,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .hero::after {
  background: #000;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .hero picture,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .hero img {
  display: none;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(h1, h2, h3, h4, h5, h6, p, li, td, th, span, div, label, strong, em) {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(a:any-link, button, summary) {
  color: #ff0;
  background-color: #000;
  border-color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) a:any-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(a:hover, a:focus-visible, button:hover, button:focus-visible) {
  color: #000;
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 2px;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(input, select, textarea) {
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) ::placeholder {
  color: #fff;
  opacity: 1;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .anchor-menu {
  border-bottom: 2px solid #fff;
  box-shadow: none;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .anchor-menu a.is-active {
  color: #000;
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) footer .footer {
  border-top: 2px solid #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(hr, table, td, th) {
  border-color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(img, picture, svg) {
  filter: grayscale(100%) contrast(140%);
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .nav-search-results {
  background: #000;
  border: 2px solid #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .nav-search-results li.is-active {
  background: #ff0;
  color: #000;
}

/* ===== acessibilidade: tamanho de fonte (botoes A+ / A-) ===== */

/* A+/A-: escalam a raiz; como a escala tipográfica está em rem, tudo acompanha */
html.font-size-1 { font-size: 112.5%; } /* 18px de raiz */
html.font-size-2 { font-size: 125%; }

main hr {
  border: 0;
  border-top: 1px solid rgb(0 0 0 / 10%);
  margin: 32px 0;
}

/* ===== pacote de paridade visual do Portal Institucional (19/08) ===== */

/* --- parágrafos-de-link (classe marcada em scripts.js: p com um único <a>) --- */

/* ícones azuis por tipo de link, agora em TODO o site (a produção usa o mesmo
   padrão nas páginas institucionais e da LAI); a marcação via classe corrige o
   vazamento do :only-child para links no meio de texto (caso IN-84) */
main .section p.link-doc > a::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -3px;
  background-color: #4aa9d8;
  -webkit-mask: var(--lai-icone) center / contain no-repeat;
  mask: var(--lai-icone) center / contain no-repeat;
}

main .section p.link-doc > a {
  --lai-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>');

  display: inline-block;
  padding: 6px 14px;
  margin: -6px -14px;
  border-radius: 999px;
  color: #010101;
  font-weight: 700;
  text-decoration: underline;
}

main .section p.link-doc > a[href^="http"] {
  --lai-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
}

main .section p.link-doc > a[href*="/documents/"],
main .section p.link-doc > a[href$=".pdf"],
main .section p.link-doc > a:not([href]) {
  --lai-icone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>');
}

/* destaque no hover, como na produção (pílula azul clara) */
main .section p.link-doc > a:hover,
main .section p.link-doc > a:focus-visible {
  background-color: #d8ecf5;
}

/* réplica 1:1 dos links da produção que existem sem destino (dossiê) */
main .section p.link-doc > a:not([href]) {
  cursor: default;
}

/* Este bloco existe justamente para vir por ultimo e vencer por ordem;
   a regra de ordem por especificidade nao se aplica aqui. */
/* stylelint-disable no-descending-specificity */

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .section p.link-doc > a,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .section p.link-doc > a:not([href]),
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .anchor-menu a:any-link {
  color: #ff0;
  background-color: #000;
}

/* o ícone do parágrafo-de-link é uma máscara colorida por background-color */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .section p.link-doc > a::before {
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .section p.link-doc > a:hover,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .section p.link-doc > a:focus-visible,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .anchor-menu a:hover,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .anchor-menu a.active {
  color: #000;
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .anchor-menu a.active {
  border-bottom-color: #ff0;
}

/* ===== alto contraste: menu lateral de Acesso a Informacao =====
   `styles/menu-lai.css` e carregado dinamicamente DEPOIS deste arquivo, entao
   nao adianta ordem: cada seletor aqui repete o original prefixado por
   `html.contrast` para vencer por especificidade. Sem isto o menu inteiro fica
   cinza #525252 sobre preto — foi o que o Matheus viu em 20/08. */

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav .lai-nav-titulo {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav a:any-link {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav a:hover,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav a:focus-visible,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav a.is-current {
  color: #000;
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav li {
  border-bottom-color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .lai-nav .lai-nav-alternar::before {
  border-right-color: #ff0;
  border-bottom-color: #ff0;
}

/* ===== alto contraste: blocos =====
   Varredura feita em 20/08 sobre todo o CSS de `blocks/` e `styles/`,
   calculando a razao de contraste de cada cor literal contra fundo preto.
   Doze declaracoes ficavam abaixo de 4.5:1; as de styles.css e menu-lai.css
   estao cobertas acima, e estas sao o resto. Os seletores repetem o original
   prefixado por `html.contrast` porque o CSS de bloco carrega depois e tem
   especificidade maior. */

/* bloco downloads — o "Selecione o relatorio" ficava #555 (2.8:1) e o botao
   circular #444 (2.2:1) */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-combo {
  border-color: #fff;
  background-color: #000;
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-combo-texto.is-placeholder {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcoes {
  border-color: #fff;
  background-color: #000;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao::before {
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao:hover,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao:focus-visible,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao[aria-selected='true'] {
  background-color: #ff0;
  color: #000;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao-sem-arquivo,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-status {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-opcao-sem-arquivo::before {
  background-color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-button {
  border-color: #fff;
  background-color: #000;
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-button:hover {
  border-color: #ff0;
  background-color: #ff0;
  color: #000;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) main .downloads .downloads-button[aria-disabled='true'] {
  color: #fff;
}

/* campo de busca do cabecalho — placeholder ficava #6b6c7e (4.1:1) */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-search input::placeholder {
  color: #fff;
}

/* indicador +/- da sanfona — ficava #373737 (1.8:1) */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .sanfona .sanfona-item-label::after {
  color: #ff0;
}

/* stylelint-enable no-descending-specificity */

/* ===== alto contraste: dropdown do menu superior =====
   Achado do Matheus em 20/08 (noite), validando o piloto UE: o painel do
   dropdown ("Acesso à Informação") herdava itens em #373737 (2,4:1 sobre
   preto) e a setinha do nav-drop sumia. Mesmo padrão das demais
   sobreposições: seletor original prefixado por `html.contrast` para vencer
   por especificidade — o original vive em blocks/header/header.css, que
   carrega depois deste arquivo. Defeito de família: existe também nos 7
   sites v2 (propagar na fonte única). */

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .default-content-wrapper > ul > li {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .default-content-wrapper > ul > li > ul {
  background-color: #000;
  border: 1px solid #fff;
  box-shadow: none;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .default-content-wrapper > ul > li > ul > li a:any-link {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .default-content-wrapper > ul > li > ul > li a:hover,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .default-content-wrapper > ul > li > ul > li a:focus-visible {
  color: #000;
  background-color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .nav-drop::after {
  border-color: #ff0;
}

/* alto contraste: a setinha-botão do dropdown segue o amarelo dos links */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .nav-drop-seta {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) header nav .nav-sections .nav-drop-seta::after {
  border-color: #ff0;
}

/* Alto contraste — imagem de interface.
   A regra geral dessatura toda imagem (`grayscale` + `contrast`), o que e'
   correto para fotografia mas destroi icone: o glifo verde da rede social vira
   cinza claro sobre o disco branco e some, e a marca some sobre o preto.
   Cabecalho e rodape nao tem fotografia — so marca e icone —, entao ali a arte
   original e' preservada, e apenas a marca monocromatica e' invertida.

   Limite conhecido: os icones de servico desenhados como glifo escuro sobre
   fundo transparente (conversa, megafone, fone) continuam pouco visiveis. Isso
   nao se resolve por filtro; depende de arte com variante para fundo escuro ou
   de SVG que herde `currentColor`. Registrado no Padrao como regra de ativo. */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(header, footer) :is(img, picture, svg) {
  filter: none;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) :is(header, footer) img[src*='logo-petrobras'] {
  filter: brightness(0) invert(1);
}

/* Icone de interface em linha: quem pinta e' o tema, nao o arquivo.
   O SVG entra no DOM com `fill: currentColor`, entao basta trocar a cor do
   contexto para ele acompanhar o tema — inclusive o de alto contraste. */
.icon svg,
.icone-social svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

/* o disco branco vinha desenhado dentro do PNG; agora e' do tema */
footer .icone-social {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 5px;
  border: 1px solid #e0e5e2;
  border-radius: 50%;
  background-color: #fff;
  color: #008542;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) footer .icone-social {
  border-color: #ff0;
  background-color: #000;
  color: #ff0;
}

/* a regra de alvo de toque do rodape tem especificidade maior e vencia a cor
   do icone; aqui a cor do glifo e' fixada com o mesmo peso, nos dois temas */
footer .footer .rodape-topo a.icone-social:any-link {
  color: #008542;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) footer .footer .rodape-topo a.icone-social:any-link {
  color: #ff0;
}

/* ===== gabarito `noticia` (metadado template, classe no body) =====
   Medido na producao dos comunicas (20/09, 1440px): coluna de leitura 864px
   em x=288; h1 32px/1.6 700 verde; datas 16px/1.6 cinza; corpo 16px/1.6. As
   cores vem dos tokens da familia noticias (styles/tokens.css do site). */
body.noticia main > .section > div {
  max-width: 864px;
}

body.noticia main .section h1 {
  color: var(--noticia-verde);
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 8px;
}

body.noticia main .section h1::after {
  content: '';
  display: block;
  width: 32px;
  height: 4px;
  margin-top: 16px;
  background: var(--noticia-amarelo);
}

body.noticia main .section .noticia-datas {
  color: var(--noticia-cinza);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 700;
  margin: 16px 0 32px;
}

body.noticia main .section p,
body.noticia main .section li {
  color: var(--noticia-cinza);
  font-size: 1rem;
  line-height: 1.6;
}

body.noticia main .section picture img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

body.noticia main .section .noticia-credito {
  display: block;
  margin-top: 4px;
  color: var(--noticia-cinza);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: right;
}

@media (width < 700px) {
  body.noticia main .section h1 {
    font-size: 1.5rem;
    line-height: 1.4;
  }
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body.noticia main .section h1,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body.noticia main .section .noticia-datas,
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body.noticia main .section .noticia-credito {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body.noticia main .section h1::after {
  background: #ff0;
}

/* Notícia da Agência (tema petrobras), medida em 02/10/2026 a 1440:
   título 32px/1.2 #373737; linha fina 20px/1.6 itálico; autor e data 16px;
   corpo 18px/1.6 #525252; etiquetas em pílulas; compartilhar à direita da
   data. Remedido em 21/10/2026 (1440, 1280, 1024, 768, 390): título 32/1,2
   em todas as larguras; barra 16 abaixo (12 no celular) e 32 depois dela; a
   linha fina tem 32 embaixo e, sem ela, a produção mantém a caixa vazia — 64
   da barra ao autor; autor, data e etiquetas com 32 entre si. */
html[data-tema='petrobras'] body.noticia main .section h1 {
  margin: 0 0 32px;
  color: #373737;
  font-size: 2rem;
  line-height: 1.2;
}

html[data-tema='petrobras'] body.noticia main .section h2.noticia-linha-fina {
  margin: 0 0 32px;
  color: #373737;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
}

html[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > p.noticia-autor {
  margin: 0 0 32px;
  font-size: 1rem;
}

/* sem linha fina: 64 (as margens do título e do autor colapsam) */
html[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > h1 + p.noticia-autor {
  margin-top: 64px;
}

html[data-tema='petrobras'] body.noticia main .section .noticia-autor a:any-link {
  color: var(--noticia-verde);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.44;
  text-underline-offset: 0.23em;
}

html[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > p.noticia-datas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 36px;
  margin: 0 0 32px;
  font-weight: 400;
}

/* "Atualizado em" (metadado `atualizado`), negrito e 16 antes do "Postado em",
   medido no Nossa Energia em 29/10/2026 (14px 700 / 14px 400) */
html[data-tema='petrobras'] body.noticia main .section .noticia-quando {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

html[data-tema='petrobras'] body.noticia main .section .noticia-quando .noticia-atualizado {
  font-weight: 700;
}

html[data-tema='petrobras'] body.noticia main .section .noticia-quando:has(.noticia-atualizado) time {
  font-size: 0.875rem;
}

/* barra amarela do título da notícia da Agência a 16 do texto de 768 para
   cima, como a produção (medido em 07/11/2026 a 1440, 1280, 1024 e 768).
   A regra geral acima (16) perdia para a do tema
   (html[data-tema] main h1::after, 12), e a linha de compartilhar subia 4.
   Abaixo de 768 continua 12, como lá */
@media (width >= 768px) {
  html[data-tema='petrobras'][data-site='s12'] body.noticia main .section h1::after {
    margin-top: 16px;
  }
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main .section h1::after {
    margin-top: 12px;
  }

  html[data-tema='petrobras'] body.noticia main .section h2.noticia-linha-fina {
    font-size: 1.125rem;
  }

  /* celular: a data (14/1,32) numa linha e, 24 abaixo, os botões
     encostados à direita, com o "Copiar texto" só no ícone */
  html[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > p.noticia-datas {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  html[data-tema='petrobras'] body.noticia main .section .noticia-datas time {
    font-size: 0.875rem;
    line-height: 1.32;
  }

  html[data-tema='petrobras'] body.noticia .noticia-compartilhar {
    justify-content: flex-end;
  }

  html[data-tema='petrobras'] body.noticia .noticia-compartilhar .noticia-copiar {
    gap: 0;
    font-size: 0;
  }
}

.noticia-compartilhar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.noticia-compartilhar .noticia-rede:any-link,
.noticia-compartilhar .noticia-copiar {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d7d7d7;
  border-radius: 100px;
  background: #fff;
  color: var(--noticia-verde);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.noticia-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.noticia-etiquetas a:any-link {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 100px;
  color: #373737;
  font-size: 0.75rem;
  text-decoration: none;
}

html[data-tema='petrobras'] body.noticia main .section p,
html[data-tema='petrobras'] body.noticia main .section li {
  color: #525252;
  font-size: 1.125rem;
}

/* links do texto da notícia: verdes, negrito, sublinhados a 0,23em, como
   na Agência (medido em 21/10/2026 em /w/negocio/plataforma-da-petrobras-
   p-82-...): o padrão do site é o azul-petróleo de peso normal */
html[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > :is(p, ul, ol):not(.noticia-autor, .noticia-datas, .noticia-etiquetas) a:any-link:not(.button) {
  color: var(--noticia-verde);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.23em;
}

html.contrast[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > :is(p, ul, ol) a:any-link:not(.button, .noticia-rede) {
  background: #000;
  color: #ff0;
}

/* etiquetas da Agência (21/10/2026): pílulas de 32 (14/22,4 #373737, 4×8,
   borda #d7d7d7, raio 32, fundo branco), 8 entre elas, 40 até o crédito da
   foto (32 no celular). A lista não leva o "■" nem o recuo de 27 das listas
   do texto, nem a cor dos links do texto. */
html[data-tema='petrobras'] body.noticia main .section ul.noticia-etiquetas {
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
}

html[data-tema='petrobras'] body.noticia main .section ul.noticia-etiquetas > li {
  display: flex;
  margin: 0;
  padding: 0;
}

html[data-tema='petrobras'] body.noticia main .section ul.noticia-etiquetas > li::marker {
  content: none;
}

html[data-tema='petrobras'] body.noticia main .section ul.noticia-etiquetas a:any-link {
  padding: 4px 8px;
  border: 1px solid #d7d7d7;
  border-radius: 32px;
  background: #fff;
  color: #373737;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main .section ul.noticia-etiquetas {
    margin-bottom: 32px;
  }
}

/* notícia sem etiquetas na Agência (06/11/2026): a produção mantém a faixa
   das tags vazia (32 em cima + 40 embaixo; 32 + 32 no celular), então o
   texto, a foto ou o título do corpo ficam a 72 da linha de compartilhar
   (64 abaixo de 768). Medido em 279 notícias sem tags: /w/ccus, /w/petrobras-
   desenvolve-mapeamento-digital-... e /w/petrobras-preve-conectar-sistema-5g-... */
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia .section p.noticia-datas:not(:has(+ ul.noticia-etiquetas)) {
  margin-bottom: 72px;
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia .section p.noticia-datas:not(:has(+ ul.noticia-etiquetas)) {
    margin-bottom: 64px;
  }
}

/* parágrafos do texto separados por uma linha em branco, como na produção */
html[data-tema='petrobras'] body.noticia main .section .default-content-wrapper > p {
  margin: 0 0 1.6em;
}

html[data-tema='petrobras'] body.noticia main .section :is(.noticia-datas, .noticia-autor) {
  color: #373737;
  font-size: 1rem;
}

html[data-tema='petrobras'] body.noticia main .section h2:not(.noticia-linha-fina) {
  color: #373737;
  font-size: 1.5rem;
  line-height: 1.32;
}

/* Corpo da notícia da Agência, remedido em 05/11/2026 (P-71, monitoramento de
   praias e FPSO, 1440 e 390): 40 entre parágrafos; intertítulo 24/28,8
   (22/26,4 abaixo de 768) com 40 antes e 48 depois; "Fotos" com 80 antes e 40
   até a galeria; 160 do texto até "Downloads". O Nossa Energia
   (main.noticia-enxuta) segue com a linha em branco de 1,6em. */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper > p:not(.noticia-autor, .noticia-datas) {
  margin: 0 0 40px;
}

/* Legenda de foto no corpo (figcaption da produção, s12 06/11/2026): 8 px
   abaixo da foto e 56 px até o texto; 14/22,4 itálico #525252 justificado,
   12/19,2 abaixo de 768; na largura da coluna, como a foto */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper > p.com-legenda:not(.noticia-autor) {
  margin-bottom: 0;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper > p.com-legenda > picture > img {
  display: block;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper > p.noticia-legenda-corpo:not(.noticia-autor) {
  margin: 8px 0 56px;
  color: #525252;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.6;
  text-align: justify;
}

/* legenda no fim do corpo: o figure da produção soma 16 aos 160 até
   "Downloads" (176); a margem de 96 vence os 80 do bloco Downloads */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper > p.noticia-legenda-corpo:has(+ .noticia-downloads) {
  margin-bottom: 96px;
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper > p.noticia-legenda-corpo:not(.noticia-autor) {
    font-size: 0.75rem;
  }
}

/* Corpo da notícia da Agência (SITE_CONFIG.corpoAgencia, s12 06/11/2026),
   como a produção:
   - a foto do corpo fica no meio da linha (img vertical-align: middle, do
     Bootstrap do Liferay). Com baseline, sobrava a folga da descendente
     embaixo dela: 48 até o texto, em vez de 40;
   - negrito, itálico e sublinhado do texto ficam #373737, e 16/1,6 abaixo de
     768 (lá, `.news-content *`). O <p> em volta segue #525252, 18. Ficam de
     fora os links e os <p> com classe (legenda, autor). */
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > p > picture > img {
  vertical-align: middle;
}

html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > :is(p, ul, ol):not([class]) :is(em, strong, b, i, u):not(a, a *) {
  color: #373737;
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > :is(p, ul, ol):not([class]) :is(em, strong, b, i, u):not(a, a *) {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* h1 de CORPO da notícia da Agência (P0 do s12, 07/11/2026): o Liferay usa
   <h1> como intertítulo e o JS dele o mostra como <h2>. Na produção: 32/38,4
   de 768 para cima e 24/28,8 abaixo, #373737, sem o traço do título, 40 antes
   e 48 até o texto (5 larguras, 11 notícias). O título é o 1º h1 da página;
   os de corpo vêm depois dele, na mesma seção ou numa seguinte. */
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > h1 ~ h1,
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section:has(h1) ~ .section .default-content-wrapper > h1 {
  margin: 40px 0 48px;
  font-size: 2rem;
  line-height: 1.2;
}

html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > h1 ~ h1::after,
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section:has(h1) ~ .section .default-content-wrapper > h1::after {
  content: none;
}

/* o <h1><strong> do Liferay fica 700 (o strong herdaria bolder = 900) */
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > h1 ~ h1 :is(strong, b),
html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section:has(h1) ~ .section .default-content-wrapper > h1 :is(strong, b) {
  font-weight: inherit;
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section .default-content-wrapper > h1 ~ h1,
  html[data-tema='petrobras'] body.noticia main.noticia-corpo-agencia:not(.noticia-enxuta) .section:has(h1) ~ .section .default-content-wrapper > h1 {
    font-size: 1.5rem;
  }
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section:not(.noticia-relacionadas) .default-content-wrapper > h2:not(.noticia-linha-fina, .noticia-downloads-titulo) {
  margin: 40px 0 48px;
  line-height: 1.2;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper:has(+ .gallery-wrapper) > h2:last-child {
  margin: 80px 0 40px;
}

/* "Fotos" da galeria (C3 do s12): a câmera de 24 x 21 (#525252, também no
   contraste) a 16 do texto, no meio da linha de 31,68 da produção */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper:has(+ .gallery-wrapper > .gallery.captions) > h2:last-child {
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.32;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper:has(+ .gallery-wrapper > .gallery.captions) > h2:last-child::before {
  content: '';
  flex: 0 0 24px;
  height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 23' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 22H3C2.46957 22 1.96086 21.7893 1.58579 21.4142C1.21071 21.0391 1 20.5304 1 20V6C1 5.46957 1.21071 4.96086 1.58579 4.58579C1.96086 4.21071 2.46957 4 3 4H7L9 1H17L19 4H23C23.5304 4 24.0391 4.21071 24.4142 4.58579C24.7893 4.96086 25 5.46957 25 6V20C25 20.5304 24.7893 21.0391 24.4142 21.4142C24.0391 21.7893 23.5304 22 23 22Z'/%3E%3Cpath d='M13 17C15.4853 17 17.5 14.9853 17.5 12.5C17.5 10.0147 15.4853 8 13 8C10.5147 8 8.5 10.0147 8.5 12.5C8.5 14.9853 10.5147 17 13 17Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* de 768 a 1023 a galeria da produção (título e fotos) fica nas colunas 3 a
   10 de uma grade de 8 colunas com vão de 24 (mais 2 de largura zero): o
   recuo é de 2 colunas e 2 vãos, (largura - 216) / 4 + 48 (150 a 768) */
@media (768px <= width < 1024px) {
  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper:has(+ .gallery-wrapper > .gallery.captions) > h2:last-child,
  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .gallery-wrapper > .gallery.captions {
    margin-left: calc((100% - 216px) / 4 + 48px);
  }
}

/* depois da galeria o vão é outro (fica com a galeria) */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .noticia-downloads:not(:first-child) {
  margin-top: 80px;
}

/* linhas da caixa: rótulo 18/23,76 #010101, ícone de 20 no alto do link;
   sem espaço (390), rótulo e link encolhem juntos e quebram em 2 linhas */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .noticia-downloads-linha {
  gap: 16px;
}

/* P6 do s12 (07/11/2026): a linha das fotos da produção leva um div.links
   vazio entre o rótulo e o link, que soma dois vãos de 16 (32); a do texto
   fica com 16 (a 390: rótulo 122 e link 124, como a produção) */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .noticia-downloads-separador + .noticia-downloads-linha {
  gap: 32px;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .noticia-downloads-linha p {
  color: #010101;
  line-height: 1.32;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .noticia-downloads-botao {
  flex: 0 1 auto;
  align-items: flex-start;
  line-height: 1.44;
  text-align: left;
  text-underline-offset: 0.23em;
}

/* da caixa Downloads ao "Você pode se interessar por", 120 (os 80 do bloco
   e 40 da seção), como a produção: as margens de 48 das seções davam 128 */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) > .section:has(.noticia-downloads):has(+ .section.noticia-relacionadas) {
  margin-bottom: 40px;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) > .section:has(.noticia-downloads) + .section.noticia-relacionadas {
  margin-top: 40px;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .noticia-downloads-botao svg {
  width: 20px;
  height: 20px;
}

/* "Você pode se interessar por": 32/38,4 (24/28,8 abaixo de 768), barra
   amarela de 32×4 a 21 do título e os cartões 40 abaixo dela; recuo de 72
   até 768 e de 32 abaixo */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas h2 {
  margin: 40px 0;
  font-size: 2rem;
  line-height: 1.2;
}

html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 4px;
  margin-top: 21px;
  background: var(--noticia-amarelo);
}

/* das setas ao filete do rodapé, 40 (8 + o padding de 32 do rodapé), e 73
   até o "Aviso", como a produção (C1 do s12, 05/11/2026) */
html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas {
  margin-bottom: 8px;
}

@media (width < 900px) {
  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas > div {
    padding: 0 72px;
  }
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section:not(.noticia-relacionadas) .default-content-wrapper > h2:not(.noticia-linha-fina, .noticia-downloads-titulo) {
    font-size: 1.375rem;
  }

  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section .default-content-wrapper:has(+ .gallery-wrapper) > h2:last-child {
    font-size: 1.5rem;
    line-height: 1.32;
  }

  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas > div {
    padding: 0 32px;
  }

  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas h2 {
    margin-top: 0;
    font-size: 1.5rem;
  }

  html[data-tema='petrobras'] body.noticia main:not(.noticia-enxuta) .section.noticia-relacionadas h2::after {
    width: 28px;
    height: 3px;
  }
}

/* texto só para leitor de tela (rótulo dos ícones de compartilhar) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Notícia da Agência, remedida em 21/10/2026 com os SVG da produção: cada
   rede é o próprio desenho de 37×36 (bola branca de borda #E1E1E1 e o ícone
   verde), 16 entre elas; "Copiar texto" em pílula de 36 (borda
   rgba(0,0,0,.16), raio 32, 16 de cada lado) com o ícone de 18 a 16 do texto
   12/700 verde. O "compartilhar" do celular (botão) só abaixo de 768. */
html[data-tema='petrobras'] .noticia-compartilhar {
  gap: 16px;
}

html[data-tema='petrobras'] .noticia-compartilhar :is(.noticia-rede:any-link, button.noticia-rede) {
  width: 37px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--noticia-verde);
  line-height: 0;
  cursor: pointer;
}

html[data-tema='petrobras'] .noticia-compartilhar .noticia-rede:any-link {
  display: block;
}

html[data-tema='petrobras'] .noticia-compartilhar button.noticia-rede-nativo {
  display: none;
}

@media (width < 768px) {
  html[data-tema='petrobras'] .noticia-compartilhar button.noticia-rede-nativo {
    display: block;
  }
}

html[data-tema='petrobras'] .noticia-compartilhar .noticia-copiar {
  gap: 16px;
  min-height: 36px;
  padding: 0 16px;
  border-color: rgb(0 0 0 / 16%);
  border-radius: 32px;
}

html[data-tema='petrobras'] .noticia-compartilhar .noticia-copiar svg {
  flex: 0 0 auto;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) .noticia-compartilhar .noticia-rede-bola {
  fill: transparent;
  stroke: currentcolor;
}

html.contrast[data-tema='petrobras'] .noticia-compartilhar :is(.noticia-rede:any-link, button.noticia-rede, .noticia-copiar) {
  background: transparent;
  color: #ff0;
}

/* "Copiar texto" no alto contraste (Agência, medido em 07/11/2026 a 1440 e
   768): pílula com fundo e borda brancos a 32%, ícone #D7D7D7 e texto
   #E4F7E8, não o amarelo dos botões das redes */
html.contrast[data-tema='petrobras'][data-site='s12'] .noticia-compartilhar .noticia-copiar {
  border-color: rgb(255 255 255 / 32%);
  background: rgb(255 255 255 / 32%);
  color: #e4f7e8;
}

html.contrast[data-tema='petrobras'][data-site='s12'] .noticia-compartilhar .noticia-copiar svg {
  color: #d7d7d7;
}

/* botões das redes no alto contraste (Agência, medido em 07/11/2026 a 1440 e
   390): bola e ícone com fundo branco a 32%, bola com o contorno #E1E1E1 do
   desenho e ícone com traço #D7D7D7 de 1px. Sem isto a bola continuava branca
   (atributo fill) e o ícone (currentcolor) sumia nela. O Nossa Energia (s16)
   tem o mesmo desenho na produção (medido em 07/11/2026) */
html.contrast[data-tema='petrobras']:is([data-site='s12'], [data-site='s16']) .noticia-compartilhar .noticia-rede svg .noticia-rede-bola {
  fill: rgb(255 255 255 / 32%);
  stroke: #e1e1e1;
}

html.contrast[data-tema='petrobras']:is([data-site='s12'], [data-site='s16']) .noticia-compartilhar .noticia-rede svg :is(path, g, g *):not(.noticia-rede-bola) {
  fill: rgb(255 255 255 / 32%);
  stroke: #d7d7d7;
  stroke-width: 1px;
}

/* foto de destaque: crédito 12px #959595 à direita, 4px acima; a foto sai da
   coluna (1075px em x=183, raio 16); legenda em itálico 16px #525252 4px
   abaixo, com "Download" 14/700 verde à direita */
body.noticia main .section .noticia-foto {
  margin: 32px 0;
}

html[data-tema='petrobras'] body.noticia main .section .noticia-foto .noticia-credito {
  margin: 0 0 4px;
  color: #959595;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: right;
}

/* remedido em 21/10/2026: a foto tem altura fixa e é recortada ao centro
   (470 a partir de 768, 163 no celular); de 1024 em diante sai uma coluna do
   grid para cada lado (col-2-11: 1075 a 1440, 941 a 1280, 728 a 1024) — a
   coluna do texto tem 8 unidades menos a calha de 32, logo a unidade é
   (coluna + 32) / 8. Embaixo, 40 até o texto. */
html[data-tema='petrobras'] body.noticia main .section .noticia-foto {
  margin: 0 0 40px;
}

html[data-tema='petrobras'] body.noticia main .section .noticia-foto picture img {
  display: block;
  height: 163px;
  border-radius: 16px;
  object-fit: cover;
}

/* legenda: texto colado ao "Download" (sem vão), 16 de folga embaixo; o
   link centrado na altura, 16 entre a palavra e o ícone */
html[data-tema='petrobras'] body.noticia .noticia-legenda {
  align-items: stretch;
  gap: 0;
}

html[data-tema='petrobras'] body.noticia .noticia-legenda > span {
  flex: 1;
  padding-bottom: 16px;
}

html[data-tema='petrobras'] body.noticia .noticia-legenda .noticia-download-foto:any-link {
  gap: 16px;
  line-height: 1.44;
}

@media (width >= 768px) {
  html[data-tema='petrobras'] body.noticia main .section .noticia-foto picture img {
    height: 470px;
  }
}

@media (width >= 1024px) {
  html[data-tema='petrobras'] body.noticia main .section .noticia-foto picture {
    display: block;
    margin: 0 calc((100% + 32px) / -8);
  }
}

/* Nossa Energia (main.noticia-enxuta, metadado complementos=nenhum; 29/10,
   8 posts medidos na produção a 1440 e 390): a foto fica na coluna do texto
   (853x480 a 1440, 326x183 no celular), 16:9 com a foto inteira (contain),
   raio 8, sem legenda; etiquetas no fim do texto */
html[data-tema] body.noticia main.noticia-enxuta .section .noticia-foto picture {
  display: block;
  margin: 0;
}

html[data-tema] body.noticia main.noticia-enxuta .section .noticia-foto picture img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: contain;
}

html[data-tema] body.noticia main.noticia-enxuta .section .noticia-foto {
  margin-top: 64px;
}

/* Imagens do corpo do post no Nossa Energia (N3.3/N3.4, medido na produção em
   06/11/2026: .news-content img com aspect-ratio 16/9, object-fit contain e
   raio 8; img.infografico com altura natural). A foto fica numa caixa 16:9 na
   largura da coluna, inteira e centrada: a vertical não estica a página. O
   infográfico é escolha do autor (bloco Imagem, Formato = Infográfico) e
   ocupa a coluna inteira na altura natural. É o mesmo desenho da foto de
   destaque (.noticia-foto, acima). */
html[data-tema] body.noticia main.noticia-enxuta .section .default-content-wrapper > p > picture > img,
html[data-tema] body.noticia main.noticia-enxuta .section .imagem:not(.infografico) .imagem-figura img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: contain;
}

html[data-tema] body.noticia main.noticia-enxuta .section .imagem.infografico .imagem-figura img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 8px;
}

html[data-tema] body.noticia main.noticia-enxuta .section .noticia-etiquetas {
  margin: 40px 0 0;
}

/* Corpo da notícia do Nossa Energia (main.noticia-enxuta), medido na produção
   em 06/11/2026 a 1440 e 390 (/w/transicao-energetica/matriz-energetica-...,
   /w/transicao-energetica-justa-e-...-1 e /w/sustentabilidade/a-historia-do-
   futebol-feminino-...), N1.2, N1.3, N1.4, N2.2, N2.3 e N3.5:
   - texto 18/28,8 #373737 (aqui #525252), 24 entre parágrafos;
   - h1 40/40 (38/38 abaixo de 768); h2 32/38,4 com 48 antes e 40 depois
     (24/28,8 e 24 depois abaixo de 768); h3 24/28,8 (22/26,4); h4 22/29,04
     (20/26,4); h5 20/26,4 (18/23,76) — 48 antes e 16 depois. Aqui o h3
     herdava os 32 do tema e ficava maior que o h2 (24);
   - link verde 700 sem sublinhado; o sublinhado (a 0,23em) só no hover, sem
     animação;
   - legenda da foto de destaque 8 abaixo dela, 14/22,4 itálico #525252 até
     490 de largura (12/19,2 na coluna inteira abaixo de 768), 40 até o texto;
   - vídeo na largura da coluna (853x480 a 1440, 326x183 a 390), raio 8,
     24 antes e depois;
   - citação: o <cite> da produção, fio de 1px #d7d7d7 à esquerda e 24 de
     respiro, texto em itálico e o autor em 600 sem itálico. O author limpa
     <blockquote> e <cite> do texto ao gravar: a citação é o bloco quote
     (blocks/quote), que leva o mesmo corpo de texto daqui (N2.3, 06/11). */
html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > :is(p, ul, ol, blockquote),
html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .quote blockquote,
html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > :is(ul, ol) li {
  color: #373737;
  font-size: 1.125rem;
  line-height: 1.6;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > p:not(.noticia-datas, .noticia-autor) {
  margin: 0 0 24px;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h1 {
  font-size: 2.5rem;
  line-height: 1;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > :is(h2, h3, h4, h5):not(.noticia-linha-fina) {
  margin: 48px 0 16px;
  color: #373737;
  font-weight: 700;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h2:not(.noticia-linha-fina) {
  margin-bottom: 40px;
  font-size: 2rem;
  line-height: 1.2;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h4 {
  font-size: 1.375rem;
  line-height: 1.32;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h5 {
  font-size: 1.25rem;
  line-height: 1.32;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > :is(p, ul, ol, blockquote):not(.noticia-autor, .noticia-datas, .noticia-etiquetas) a:any-link:not(.button),
html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .quote blockquote a:any-link {
  color: var(--noticia-verde);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 0.23em;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > :is(p, ul, ol, blockquote):not(.noticia-autor, .noticia-datas, .noticia-etiquetas) a:any-link:not(.button):hover,
html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .quote blockquote a:any-link:hover {
  text-decoration: underline;
}

html[data-tema] body.noticia main.noticia-enxuta .section .noticia-foto:has(+ p.noticia-legenda-destaque) {
  margin-bottom: 8px;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > p.noticia-legenda-destaque {
  max-width: 490px;
  margin: 0 0 40px;
  color: #525252;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.6;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > p.noticia-legenda-destaque * {
  font-size: inherit;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section > .embed-wrapper:has(> .embed-video) {
  padding: 0;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .embed.embed-video {
  width: 100%;
  max-width: none;
  margin: 24px 0;
  border-radius: 8px;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > blockquote {
  margin: 0 0 24px;
  padding: 0 0 0 24px;
  border-left: 1px solid #d7d7d7;
  font-style: normal;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > blockquote > *,
html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .quote blockquote > div > * {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > blockquote :is(strong, b) {
  font-weight: 600;
}

/* celular (M8, 06/11/2026 a 390 e 767): a trilha numa linha só, o título da
   notícia cortado na borda (na produção a linha passa da tela; aqui rola de
   lado, sem barra); os botões de compartilhar no fim do texto, centrados, 12
   entre eles, 72 abaixo das etiquetas */
.noticia-compartilhar-fim {
  display: none;
}

@media (width < 768px) {
  html[data-tema] body.noticia main.noticia-enxuta .breadcrumb .breadcrumb-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html[data-tema] body.noticia main.noticia-enxuta .breadcrumb .breadcrumb-list > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  html[data-tema] body.noticia main.noticia-enxuta .section .default-content-wrapper > p.noticia-compartilhar-fim {
    display: flex;
    justify-content: center;
    margin: 72px 0 0;
  }

  html[data-tema] body.noticia main.noticia-enxuta .noticia-compartilhar-fim .noticia-compartilhar {
    justify-content: center;
    gap: 12px;
  }

  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > p.noticia-datas {
    min-height: 0;
  }
}

@media (width < 768px) {
  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h1 {
    font-size: 2.375rem;
  }

  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h2:not(.noticia-linha-fina) {
    margin-bottom: 24px;
    font-size: 1.5rem;
  }

  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h3 {
    font-size: 1.375rem;
  }

  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h4 {
    font-size: 1.25rem;
  }

  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > h5 {
    font-size: 1.125rem;
  }

  html[data-tema='petrobras'] body.noticia main.noticia-enxuta .section .default-content-wrapper > p.noticia-legenda-destaque {
    max-width: none;
    font-size: 0.75rem;
  }
}

/* coluna da notícia (21/10/2026), a mesma do título ao fim do texto e da
   trilha: de 1024 em diante é a col-3-10 do grid de 12 da produção (unidade
   = (container + 32) / 12, container = tela − 144; 853 em x=293 a 1440, 747
   em 267 a 1280, 576 em 224 a 1024); acima de 1440 o container fica em 1440
   sem calha (949). De 768 a 1023 a produção desalinha título (recuado) e
   texto (container inteiro): aqui tudo fica no container, de 72 a 72
   (decisão do Luciano, 21/10). No celular, 32 de cada lado. */
html[data-tema='petrobras'] body.noticia main > .section:not(.noticia-relacionadas) > div {
  box-sizing: border-box;
  width: calc(100% - 64px);
  max-width: none;
  margin: 0 32px;
  padding: 0;
}

@media (width >= 768px) {
  html[data-tema='petrobras'] body.noticia main > .section:not(.noticia-relacionadas) > div {
    width: calc(100% - 144px);
    margin: 0 72px;
  }
}

@media (width >= 1024px) {
  html[data-tema='petrobras'] body.noticia main > .section:not(.noticia-relacionadas) > div {
    width: calc((100% - 112px) * 2 / 3 - 32px);
    margin: 0 0 0 calc(72px + (100% - 112px) / 6);
  }
}

@media (width >= 1441px) {
  html[data-tema='petrobras'] body.noticia main > .section:not(.noticia-relacionadas) > div {
    width: calc(1472px * 2 / 3 - 32px);
    margin-left: calc((100% - 1440px) / 2 + 1472px / 6);
  }
}

.noticia-legenda {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 4px;
}

.noticia-legenda > span {
  color: #525252;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
}

.noticia-download-foto:any-link,
.noticia-downloads-botao {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary, #008542);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.noticia-download-foto svg {
  width: 16px;
  height: 16px;
}

/* bloco "Downloads": 80px acima e abaixo; título 24/700 com o ícone a 16px;
   caixa #f8f8f8 de raio 16 e padding 32, 40px abaixo do título; linhas de 48px
   (rótulo 18/700, link 16/700 verde com ícone), separador de 2px #d7d7d7 */
.noticia-downloads {
  padding: 80px 0;
}

main .section h2.noticia-downloads-titulo,
.noticia-downloads-titulo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  color: #373737;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.32;
}

.noticia-downloads-titulo svg {
  width: 32px;
  height: 32px;
}

.noticia-downloads-caixa {
  padding: 32px;
  border-radius: 16px;
  background: #f8f8f8;
}

.noticia-downloads-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
}

main .section .noticia-downloads-linha p,
.noticia-downloads-linha p {
  margin: 0;
  color: #373737;
  font-size: 1.125rem;
  font-weight: 700;
}

.noticia-downloads .noticia-downloads-botao {
  font-size: 1rem;
}

.noticia-downloads-botao:disabled {
  opacity: 0.5;
  cursor: progress;
}

.noticia-downloads-separador {
  height: 2px;
  margin: 24px 0;
  border: 0;
  background: #d7d7d7;
}

html[data-tema='petrobras'] body.noticia main .section.noticia-relacionadas > div {
  max-width: 1440px;
  padding: 0 72px;
}

@media (width < 900px) {
  html[data-tema='petrobras'] body.noticia main .section.noticia-relacionadas > div {
    padding: 0 24px;
  }
}

/* conteudo oculto no site e guardado no conteudo (scripts/oculto.js):
   so' existe na pagina dentro do Universal Editor */
.oculto-no-editor {
  position: relative;
  opacity: 0.45;
  outline: 2px dashed #9a9a9a;
  outline-offset: 2px;
}

.oculto-no-editor::after {
  content: 'Oculto no site';
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 4px;
  background: #373737;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* estilo de secao `girar-blocos` (scripts.js: girarBlocos): os blocos da
   secao se alternam como os paineis do banner-timer da producao
   (/quem-somos/perfil); os controles sao os do carousel `temporizador` —
   pausa verde de 40 e pontos de 16 (vao 16) 48 depois, centrados em 15% e
   20 acima do pe'; abaixo de 768, coluna em 93% a 188 do pe', pontos de 12
   e pausa translucida. */
main > .section.girar-blocos {
  position: relative;
}

main > .section.girar-blocos > [hidden] {
  display: none;
}

main .girar-controles {
  position: absolute;
  bottom: 20px;
  left: 15%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 48px;
  transform: translateX(-50%);
}

main .girar-pontos {
  display: flex;
  gap: 16px;
}

main .girar-ponto {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
}

main .girar-ponto[aria-current='true'] {
  border-color: #fff;
  background-color: #fff;
}

main .girar-pausa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background-color: #008542;
  cursor: pointer;
}

main .girar-pausa::before {
  content: '';
  width: 14px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.625 1.125H9.8125C9.46732 1.125 9.1875 1.40482 9.1875 1.75V14.25C9.1875 14.5952 9.46732 14.875 9.8125 14.875H12.625C12.9702 14.875 13.25 14.5952 13.25 14.25V1.75C13.25 1.40482 12.9702 1.125 12.625 1.125Z'/%3E%3Cpath d='M4.1875 1.125H1.375C1.02982 1.125 0.75 1.40482 0.75 1.75V14.25C0.75 14.5952 1.02982 14.875 1.375 14.875H4.1875C4.53268 14.875 4.8125 14.5952 4.8125 14.25V1.75C4.8125 1.40482 4.53268 1.125 4.1875 1.125Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

main .girar-pausa[aria-pressed='true']::before {
  width: 18px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.3844 9.36253L2.89375 1.11253C2.78018 1.04248 2.64998 1.00399 2.51658 1.00104C2.38318 0.998087 2.25141 1.03078 2.13486 1.09574C2.0183 1.16071 1.92119 1.25559 1.85354 1.3706C1.78589 1.48562 1.75015 1.61659 1.75 1.75003V18.25C1.75015 18.3835 1.78589 18.5144 1.85354 18.6295C1.92119 18.7445 2.0183 18.8393 2.13486 18.9043C2.25141 18.9693 2.38318 19.002 2.51658 18.999C2.64998 18.9961 2.78018 18.9576 2.89375 18.8875L16.3844 10.6375C16.4952 10.572 16.5869 10.4788 16.6507 10.367C16.7145 10.2552 16.748 10.1287 16.748 10C16.748 9.87133 16.7145 9.74486 16.6507 9.63307C16.5869 9.52128 16.4952 9.42804 16.3844 9.36253Z'/%3E%3C/svg%3E");
}

@media (width < 768px) {
  main .girar-controles {
    bottom: 188px;
    left: 93%;
    flex-direction: column-reverse;
    gap: 24px;
  }

  main .girar-pontos {
    flex-direction: column;
  }

  main .girar-ponto {
    width: 12px;
    height: 12px;
  }

  main .girar-pausa {
    background-color: rgb(0 0 0 / 32%);
  }
}

/* ---------------------------------------------------------------------------
 * estilo de secao `abertura-lado-a-lado` (27/10/2026, paginas de editoria do
 * Nossa Energia): faixa em degrade de 16px colada no cabecalho, h1 a esquerda
 * e a descricao a direita, na largura do conteudo (1296). Medido na producao a
 * 1440: faixa y=152 h=16 linear-gradient(270deg, #c4d600 0, #f1c115 68%);
 * h1 32/38,4 700 #373737 em x=72 e y=208 (40 abaixo da faixa); texto
 * 18/28,8 #272833 terminando em x=1368. Abaixo de 768 empilha, texto 16.
 * A editoria da producao nao tem trilha: a trilha automatica some quando a
 * pagina abre com esta secao (escolha do autor, nao regra de caminho).
 * ------------------------------------------------------------------------- */
html body main > .section.breadcrumb-container:has(+ .section.abertura-lado-a-lado) {
  display: none;
}

html body main .section.abertura-lado-a-lado {
  position: relative;
  margin: 0;
  padding: 56px 0 67px; /* h1 em y=208; cartoes seguintes em y=343 (medido) */
}

html body main .section.abertura-lado-a-lado + .section {
  margin-top: 0;
}

html body main .section.abertura-lado-a-lado::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 16px;
  background: linear-gradient(270deg, #c4d600 0%, #f1c115 68%);
}

html body main .section.abertura-lado-a-lado > .default-content-wrapper {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 48px;
}

html body main .section.abertura-lado-a-lado > .default-content-wrapper > h1 {
  flex: 0 0 auto;

  /* !important: as regras do tema para o 1o h1 depois da trilha e para a
     marca no cabecalho (:is/:has/:not encadeados) vencem qualquer seletor
     razoavel; o estilo e' opcional e so vale aqui */
  margin: 0 !important;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: #373737;
}

html body main .section.abertura-lado-a-lado > .default-content-wrapper > p {
  flex: 0 1 auto;
  max-width: 908px; /* cresce com o texto: 480 em Transicao, 908 em Inovacao (medido) */
  margin: 15px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #272833;
}

@media (width >= 1344px) {
  html body main .section.abertura-lado-a-lado > .default-content-wrapper {
    padding: 0;
  }
}

@media (width < 768px) {
  html body main .section.abertura-lado-a-lado > .default-content-wrapper {
    flex-direction: column;
  }

  html body main .section.abertura-lado-a-lado > .default-content-wrapper > p {
    margin-top: 0;
    font-size: 1rem;
  }
}

/* ==========================================================================
 * estilo de seção `lateral-direita` (29/10/2026, "Mais recentes" do Nossa
 * Energia, medido a 1440: coluna principal 852, coluna lateral 410, 32 entre
 * elas). Na coluna lateral, os títulos são rótulos pequenos com fio embaixo e
 * as listas de links viram pílulas (as "tags populares" da produção).
 * ========================================================================== */
main .section.lateral-direita .coluna-lateral {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 48px;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > :is(h2, h3, h4) {
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #d7d7d7;
  color: #525252;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
}

/* título logo antes de um bloco que não é lista de notícias (o cartão da
   newsletter): na produção do Nossa Energia (06/11/2026, 1440 a 390) é o h3
   19/22,8 700 #373737 sem fio embaixo, com o cartão 8 abaixo — aqui ficava o
   rótulo com fio e 72 de vão até o cartão (H8, M3). Os rótulos de lista
   (Últimas notícias, Tags populares) seguem com o fio. */
html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper:has(+ div:not(.news-index-wrapper, .default-content-wrapper)) > :is(h2, h3, h4):last-child {
  margin: 0;
  padding: 0;
  border: 0;
  color: #373737;
  font-size: 1.1875rem;
  line-height: 1.2;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper:has(> :is(h2, h3, h4):last-child) + div:not(.news-index-wrapper, .default-content-wrapper) {
  margin-top: -40px; /* 48 do vão da coluna - 40 = 8 */
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > :is(h2, h3, h4)::after,
html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > :is(h2, h3, h4)::before {
  content: none;
  display: none;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul > li {
  display: block;
  margin: 0;
  padding: 0;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul > li::before,
html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul > li::marker {
  content: none;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 500px;
  color: #525252;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;
}

main .section.lateral-direita .coluna-lateral > div {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* do banner ao título "Mais recentes": 56 até 1024 e 80 a partir de 1025,
   medido na produção do Nossa Energia em 06/11/2026 (1024, 768 e 390: 56;
   1440: 80). A margem colapsa com os 48 da seção de cima. */
html[data-tema] body main > .section.lateral-direita {
  margin-top: 56px;
}

@media (width >= 1025px) {
  html[data-tema] body main > .section.lateral-direita {
    margin-top: 80px;
  }
}

/* no celular a coluna lateral desce para baixo da principal com a mesma margem de 32 */
@media (width < 900px) {
  main .section.lateral-direita .coluna-lateral {
    padding-inline: 32px;
  }
}

@media (width >= 900px) {
  main .section.lateral-direita {
    display: grid;
    grid-template-columns: minmax(0, 852fr) minmax(0, 410fr);
    gap: 0 32px;
    max-width: 1296px;
    margin-inline: auto;
    padding-inline: 0;
  }

  html[data-tema] body main .section.lateral-direita > :is(.coluna-principal, .coluna-lateral),
  html[data-tema] body main .section.lateral-direita .coluna-principal > div {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* as duas colunas presas no alto da linha da grade. A regra geral
     `main > .section > div { margin: auto }` centrava na vertical a coluna
     mais baixa: trocar de categoria em "Mais recentes" mudava a altura da
     principal e a lateral ("Últimas notícias") subia e descia, e na home a
     principal começava 64 abaixo do topo da seção (H4/H5, 06/11/2026) */
  html[data-tema] body main .section.lateral-direita > :is(.coluna-principal, .coluna-lateral) {
    align-self: start;
    margin-block: 0;
  }

  /* o rótulo "Últimas notícias" fica ~57 abaixo do topo do título "Mais recentes" */
  main .section.lateral-direita .coluna-lateral {
    margin-top: 0;
    padding-top: 136px;
  }
}

html[data-tema] body main .section.lateral-direita .coluna-principal > .default-content-wrapper:first-child > :first-child {
  margin-top: 0;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral > div {
  margin-block: 0;
  padding-block: 0;
}

@media (width >= 900px) and (width < 1344px) {
  main .section.lateral-direita {
    padding-inline: 24px;
  }
}

/* "Fundo da seção" = caixa escura arredondada (podcast do Nossa Energia,
   29/10/2026): raio 16, fundo #0d1310, respiro 80/40 e texto branco; no
   celular encosta nas bordas da tela. A partir de 900 a caixa deixa 72 de
   cada lado e para em 1440 (medido em 06/11/2026: 816 a 960, 1296 a 1440,
   1440 a 1680 e 1920; antes ela parava em 1296 e o player ficava menor) */
main > .section[data-fundo='escuro'] > div {
  max-width: none;
}

main > .section[data-fundo='escuro'] {
  --fundo-secao: transparent;

  box-sizing: border-box;
  margin: 40px 0;
  padding: 56px 16px;
  background: #0d1310;
}

/* .section.section: vence a cor de título do tema petrobras (0,4,4) */
html[data-tema] body main > .section.section[data-fundo='escuro'] .default-content-wrapper :is(h1, h2, h3, h4, p, li, a:any-link) {
  color: #fff;
}

@media (width >= 900px) {
  main > .section[data-fundo='escuro'] {
    width: calc(100% - 144px);
    max-width: 1440px;
    margin: 64px auto;
    padding: 80px 40px;
    border-radius: 16px;
  }

  main > .section[data-fundo='escuro'] > div {
    padding-inline: 0;
  }
}

/* cartão da newsletter na coluna lateral (medido em 29/10/2026): caixa com
   borda e respiro de 24, foto arredondada, título 22 e link verde */
html[data-tema] body main .section.lateral-direita .coluna-lateral .cards > ul > li {
  padding: 24px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral .cards :is(.cards-card-image, .cards-card-image img) {
  border-radius: 8px;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral .cards .cards-card-body {
  padding: 24px 0 0;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral .cards .cards-card-body :is(h2, h3, h4) {
  margin: 0 0 24px;
  color: #373737;
  font-size: 1.375rem;
  line-height: 1.32;
  text-transform: none;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral .cards .cards-card-body p {
  color: #373737;
  font-size: 1rem;
  line-height: 1.6;
}

html[data-tema] body main .section.lateral-direita .coluna-lateral .cards .cards-card-body a:any-link {
  color: #008542;
  font-weight: 700;
}

/* alto contraste da coluna lateral (29/10): rótulos #525252 e pílulas de tag
   sumiam no fundo preto */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > :is(h2, h3, h4) {
  border-color: #fff;
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul > li {
  border-color: #fff;
  background: #000;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body main .section.lateral-direita .coluna-lateral > .default-content-wrapper > ul a:any-link {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia'])) body main .section.lateral-direita .coluna-lateral .cards > ul > li {
  border-color: #fff;
  background: #000;
}

/* alto contraste x tema petrobras (29/10): os títulos de seção e os links do
   menu e da faixa superior tinham cor fixa no tema, com especificidade maior
   que a das regras gerais de contraste, e ficavam cinza e verde no preto */
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body:not(.sem-contraste) main .section.section :is(h1, h2, h3, h4, h5, h6):not(.sem-contraste, .banner-ilustrado-titulo) {
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body header nav#nav :is(.nav-sections, .nav-brand, .nav-tools) a:any-link:not(:hover, :focus-visible) {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body header nav#nav :is(.faixa-superior, .faixa-superior *) {
  background-color: #000;
  color: #fff;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body header nav#nav .faixa-superior a:any-link:not(:hover, :focus-visible) {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body header nav#nav .nav-sections .default-content-wrapper > ul > li:is(.nav-drop, :not(:has(> p > a, > a))),
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body header nav#nav .nav-sections .default-content-wrapper > ul > li > :is(button, p, span),
html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body header nav#nav :is(.nav-tools, .nav-search) :is(button, a, svg) {
  color: #ff0;
}

html.contrast:where(:not([data-tema='canalfornecedor'], [data-tema='petrobras'], [data-tema='transparencia']))[data-tema] body footer :is(.rodape-busca, .rodape-busca input, .rodape-busca button) {
  border-color: #fff;
  background: #000;
  color: #fff;
}


/* estilo de secao `coluna-larga` (T1 de /transicao-energetica, 30/10/2026):
   o conteudo padrao (titulo, texto) nas colunas 2 a 11 da grade de 12 com
   calha de 32 — 1075 em x183 a 1440, 941 a 1280, 728 em x148 a 1024 — como
   o `grid-fragment-container col-2-11` da producao ("Tecnologias
   desenvolvidas…", "Combustiveis sustentaveis…", "Responsabilidade
   ambiental…"). So' o conteudo padrao: os blocos da secao (sanfona, cartoes)
   ficam na largura deles. De 768 a 1023 e' o md-col-2-8 da producao: 7 das
   8 colunas a partir da 2a (542 em x154 a 768); abaixo de 768, a calha */
main > .section.coluna-larga > .default-content-wrapper {
  --content-max-width: min(1075px, calc((100vw - 496px) * 5 / 6 + 288px));
}

@media (768px <= width < 1024px) {
  main > .section.coluna-larga > .default-content-wrapper {
    --content-max-width: calc((100vw - 368px) * 7 / 8 + 192px);

    margin-left: calc((100vw - 368px) / 8 + 80px); /* + os 24 de padding do wrapper = x154 */
  }
}

@media (width < 768px) {
  main > .section.coluna-larga > .default-content-wrapper {
    --content-max-width: none;
  }
}

/* na grade da producao o titulo e' seguido do bloco com 16 de respiro (o
   pad-bottom do grid-fragment-element): h2 com barra -> sanfona 16, -> cartoes
   56 do pe' do texto (medido em /transicao-energetica, 30/10/2026) */
html[data-tema='petrobras'] body:not(.noticia) main > .section.coluna-larga > .default-content-wrapper > :is(h2, h3, h4):last-child {
  margin-bottom: 16px; /* o pad-bottom do grid-fragment-element (a regra geral do tema da' 32) */
}

html[data-tema='petrobras'] body:not(.noticia) main > .section.coluna-larga > .default-content-wrapper:has(> :is(h2, h3, h4):last-child) + .cartoes-wrapper {
  margin-top: 15px; /* + os 16 de padding da grade de cartoes = 31 do pe' da barra (a regra geral do tema da' 40) */
}

main > .section.coluna-larga > .default-content-wrapper + .accordion-wrapper {
  margin-top: 0;
}

/* `links-icone-corrente`: a linha de link (petro-link) com a corrente mesmo
   quando o destino e' outro site — o autor da producao escolhe o icone link a
   link ("Conheca nosso Relatorio de Sustentabilidade" ->
   sustentabilidade.petrobras.com.br em /transicao-energetica, 30/10/2026) */
html[data-tema='petrobras'] main .section.links-icone-corrente :is(.default-content-wrapper, .accordion, .tabs) p.link-doc:not(.link-arquivo):has(> a[href])::before {
  background-image: url('../icons/link-green.svg');
}

/* ============================================================
 * Banner `tela-cheia` + `transicao` (T2 de /transicao-energetica, medido na
 * producao em 30/10/2026 de 1440 a 390: o `.section.hero` do app React): o
 * mesmo banner-experiencia de vida-na-plataforma (video 100vh, preso no topo,
 * grafismo, aviso de rolar) com o conteudo CENTRADO na altura (100 de
 * padding em cima de 1024 a 1280), titulo 72/72 300 em 560 (40/40 em 370 no
 * celular), barra 64x8 a 40 (20 de 1024 a 1280; 40x2 a 20 no celular),
 * 2 paragrafos 20/24 (16/19,2) em 560 com 32 entre eles (p2 com 24 em cima;
 * 16 no celular), conteiner 1200 (x120; 40 a 1280, 42 a 1024, 34 a 768,
 * 10 no celular). Pelicula = tres cores a 20% (verde, amarelo, azul) em
 * mix-blend overlay; grafismo no tamanho natural (902x741) ancorado no canto de
 * baixo a direita (100% da largura so' no celular, como o tela-cheia ja' faz);
 * bolinha do mouse desce 37 em 2 s aparecendo e sumindo.
 * ============================================================ */
html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) {
  justify-content: center;
  padding: 0;
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-pelicula {
  background: linear-gradient(0deg, rgb(0 133 66 / 20%), rgb(0 133 66 / 20%)), linear-gradient(0deg, rgb(253 200 47 / 30%), rgb(253 200 47 / 30%)), rgb(0 98 152 / 20%);
}

@media (width >= 1200px) {
  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) > div:not(.hero-midia) {
    max-width: 1200px;
  }
}

/* o aviso de rolar e' um div direto do bloco e pegava a largura do conteiner
   (1200): na producao ele tem 40 e o texto quebra em 3 linhas (ROLE / PARA /
   BAIXO), com o mouse 10 abaixo */
html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) > div.hero-rolar {
  width: 40px;
  max-width: 40px;
  margin: 0;
  padding: 0;
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 {
  max-width: 560px;
  font-size: 4.5rem; /* 72px */
  line-height: 1;
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1::after {
  top: calc(100% + 40px);
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 + p {
  max-width: 560px;
  margin-top: 108px;
  font-size: 1.25rem; /* 20px */
  font-weight: 400;
  line-height: 1.2;
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 + p + p {
  max-width: 560px;
  margin-top: 32px;
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-rolar-mouse {
  padding-top: 3px;
}

html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-rolar-mouse > span {
  animation: hero-transicao-bolinha 2s linear infinite;
}

@keyframes hero-transicao-bolinha {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
    transform: translateY(37px);
  }

  100% {
    opacity: 0;
    transform: translateY(37px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-rolar-mouse > span {
    animation: none;
  }
}

@media (1024px <= width < 1440px) {
  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) {
    padding-top: 100px;
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1::after {
    top: calc(100% + 20px);
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 + p {
    margin-top: 58px;
  }
}

@media (width < 768px) {
  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) {
    padding-top: 0;
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) > div:not(.hero-midia) {
    padding: 0 10px;
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 {
    max-width: 370px;
    font-size: 2.5rem; /* 40px */
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1::after {
    top: calc(100% + 20px);
    width: 40px;
    height: 2px;
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 + p {
    max-width: 370px;
    margin-top: 42px;
    font-size: 1rem;
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) h1 + p + p {
    max-width: 370px;
    margin-top: 31px;
  }

  html[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-rolar-mouse {
    margin-top: 0; /* sem o texto, o mouse fica sozinho a 60 do fim */
  }
}

/* ============================================================
 * T3 de /transicao-energetica (31/10/2026): secoes do app React da producao
 * ============================================================ */

/* estilo de secao `coluna-1200`: o conteiner Bootstrap do app (1200 em x120 a
   1440; 940 abaixo de 1200, 700 abaixo de 992; 370 em x10 no celular) */
main > .section.coluna-1200 > .default-content-wrapper {
  --content-max-width: 1200px;
}

@media (width < 1200px) {
  main > .section.coluna-1200 > .default-content-wrapper {
    --content-max-width: 940px;
  }
}

@media (width < 992px) {
  main > .section.coluna-1200 > .default-content-wrapper {
    --content-max-width: 700px;
  }
}

@media (width < 768px) {
  html[data-tema] body main > .section.coluna-1200 > .default-content-wrapper {
    --content-max-width: none;

    padding: 0 10px;
  }
}

/* fundo de secao `preto`: a faixa "Como atuamos…" (#0d1310 com o degrade de
   verde-escuro a preto, 104 em cima e embaixo, 40 no celular), texto branco
   20/32 (16/25,6), titulo 32/38,4 (24/28,8), h3 19/22,8 com 32 abaixo */
main > .section[data-fundo='preto'] {
  --fundo-secao: #0d1310;

  padding: 104px 0;
  background-image: linear-gradient(rgb(0 31 6 / 40%), rgb(0 9 2));
}

/* o atributo repetido so' soma especificidade: as regras de cor e tamanho de
   titulo do tema empatavam e ganhavam por vir depois */
html[data-tema] body main > .section[data-fundo='preto'][data-fundo][data-fundo] :is(h1, h2, h3, h4, p, li) {
  color: #fff;
}

html[data-tema] body main > .section[data-fundo='preto'] > .default-content-wrapper p {
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
}

/* titulo com 41 ate' o 1o paragrafo (os 2 a mais compensam a caixa do titulo,
   63 x 65) e 20 entre paragrafos, como o app */
html[data-tema] body main > .section[data-fundo='preto'][data-fundo][data-fundo] > .default-content-wrapper h2 {
  margin-bottom: 43px;
}

html[data-tema] body main > .section[data-fundo='preto'][data-fundo][data-fundo] > .default-content-wrapper p + p {
  margin-top: 20px;
}

html[data-tema] body main > .section[data-fundo='preto'][data-fundo] > .default-content-wrapper h3 {
  margin-bottom: 32px;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.2;
}

/* a barra amarela do h3 (line-bottom da producao): 32x3 no fluxo, 12 abaixo do texto */
html[data-tema] body main > .section[data-fundo='preto'][data-fundo] > .default-content-wrapper h3::after {
  content: '';
  display: block;
  position: static;
  width: 32px;
  height: 3px;
  margin: 12px 0 0;
  background: #fdc82f;
}

@media (width < 768px) {
  main > .section[data-fundo='preto'] {
    padding: 40px 0;
  }

  html[data-tema] body main > .section[data-fundo='preto'] > .default-content-wrapper p {
    font-size: 1rem;
  }

  html[data-tema] body main > .section[data-fundo='preto'][data-fundo][data-fundo] > .default-content-wrapper h3 {
    margin-top: 39px; /* no celular o app deixa 39 do paragrafo ao h3 (64 aqui) */
  }
}

/* cartoes `virar-ilustrado` (os 6 compromissos; herda o `virar` da
   vida-na-plataforma): grade 3 x 387 com 20 entre colunas e 32 entre linhas
   (300 a 1024; 2 x 340 a 768; 1 x 370 de 380 de altura no celular) a partir
   do conteiner 1200; a ilustracao cobre o cartao sem veu nem degrade; verso
   com o texto 20/32 (16/25,6) e o botao de voltar no canto de baixo a DIREITA */
main > .section > .cartoes-wrapper:has(> .cartoes.virar-ilustrado) {
  max-width: none;
  padding: 0;
}

/* na faixa escura: 52 do paragrafo aos cartoes e os 104 da faixa embaixo (a
   regra geral das faixas, que nao vale na pagina-experiencia, dava 40 e -40) */
html[data-tema] body main > .section[data-fundo='preto'][data-fundo] > .default-content-wrapper + .cartoes-wrapper:has(> .cartoes.virar-ilustrado) {
  margin: 52px 0 0;
}

main .cartoes.virar.virar-ilustrado {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

main .cartoes.virar.virar-ilustrado > ul {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  gap: 32px 20px;
}

/* o veu da producao (.card-tech-front::before): verde-escuro #00361b
   transparente ate' 21,25%, 76% em 56% e opaco no pe'; a ilustracao sem a
   opacidade de 60% do `virar` */
main .cartoes.virar.virar-ilustrado .cartao-frente .cartao-midia::after {
  background: linear-gradient(rgb(0 54 27 / 0%) 21.25%, rgb(0 54 27 / 76%) 56%, rgb(0 54 27));
}

main .cartoes.virar.virar-ilustrado .cartao-frente .cartao-midia img {
  opacity: 1;
}

main .cartoes.virar.virar-ilustrado .cartao-verso .cartao-texto p {
  font-size: 1.25rem;
  line-height: 1.6;
}

main .cartoes.virar.virar-ilustrado .cartao-voltar {
  right: 24px;
  left: auto;
}

@media (width < 1200px) {
  main .cartoes.virar.virar-ilustrado > ul {
    width: 940px;
  }
}

@media (768px <= width < 1024px) {
  main .cartoes.virar.virar-ilustrado > ul {
    grid-template-columns: repeat(2, 340px);
    width: 700px;
    gap: 32px 20px;
  }
}

@media (width < 768px) {
  main .cartoes.virar.virar-ilustrado > ul {
    width: auto;
    margin: 0 10px;
  }

  main .cartoes.virar.virar-ilustrado .cartao-verso .cartao-texto p {
    font-size: 1rem;
  }
}

/* ============================================================
 * D8 (31/10/2026, decisão do Luciano): no alto contraste, o app da
 * /transicao-energetica (herói com vídeo, cartões `virar-ilustrado`) ganha a
 * escala de cinzas do resto do site. A produção deixa o app colorido com o
 * contraste ligado (divergência assumida; aviso ao cliente nº 45). O filtro
 * fica em cada face do cartão, não no cartão, para não achatar o giro 3D.
 * ============================================================ */
html.contrast[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-midia,
html.contrast[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto) .hero-pelicula,
html.contrast[data-tema='petrobras'] body:not(.home, .noticia) main .hero.tela-cheia.transicao:not(.tertiary, .titulo-oculto)::after {
  filter: grayscale(1);
}

html.contrast main .cartoes.virar.virar-ilustrado .cartao-frente,
html.contrast main .cartoes.virar.virar-ilustrado .cartao-verso {
  filter: grayscale(1);
}

/* estilo de secao `abertura-capitulo` (paginas de capitulo do relatorio de
   sustentabilidade, sustentabilidade.petrobras.com.br/w/sobre-o-relatorio,
   medido em 04/11/2026 a 1905): o titulo (52/68,6, 700) e o botao ficam
   numa coluna de 488 centrada; 64 da barra do titulo ao botao e do botao
   a foto; a foto sai da coluna do texto para 1008 centrados, canto 16. */
main .section.abertura-capitulo > .default-content-wrapper > :is(h1, p.button-wrapper) {
  box-sizing: border-box;
  max-width: 488px;
  margin-right: auto;
  margin-left: auto;
}

html body main .section.abertura-capitulo > .default-content-wrapper > h1 {
  font-size: 2.5rem;
  line-height: 1.32;
}

main .section.abertura-capitulo > .default-content-wrapper > p.button-wrapper {
  margin-top: 64px;
  margin-bottom: 64px;
}

main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child),
main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child) + p:has(> em:only-child) {
  width: calc(100vw - 64px);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* a foto da abertura na grade da producao: 326 a 390 (calha de 32), 624 a
   768, 728 a 1024 e 1008 de 1440 para cima */
@media (width >= 768px) {
  main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child),
  main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child) + p:has(> em:only-child) {
    width: calc(100vw - 144px);
  }
}

@media (width >= 1024px) {
  main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child),
  main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child) + p:has(> em:only-child) {
    width: min(1008px, 100vw - 296px);
  }
}

/* legenda da foto (o paragrafo so' em italico logo abaixo): na largura da
   foto, 14/22,4 italico #525252, 10 abaixo dela e 95 ate' o texto */
main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child) + p:has(> em:only-child) {
  margin-top: 10px;
  margin-bottom: 95px;
  color: #525252;
  font-size: 0.875rem;
  line-height: 1.6;
}

main .section.abertura-capitulo > .default-content-wrapper > p:has(> picture:only-child) + p:has(> em:only-child) + * {
  margin-top: 0;
}

main .section.abertura-capitulo > .default-content-wrapper > p > picture:only-child img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (width >= 900px) {
  html body main .section.abertura-capitulo > .default-content-wrapper > h1 {
    font-size: 3.25rem;
  }
}

/* estilo de secao `botao-largo`: o link em negrito sozinho no paragrafo vira
   o botao do "Proximo Capitulo" da producao — 418x64, canto 64, verde
   #008542, 0 32 de respiro, texto 18/700 a esquerda e a seta longa (46x28)
   a direita; centrado, a nao ser na abertura-capitulo (a esquerda da coluna) */
main .section.botao-largo p.button-wrapper {
  display: flex;
  justify-content: center;
}

main .section.abertura-capitulo.botao-largo p.button-wrapper {
  justify-content: flex-start;
}

main .section.botao-largo p.button-wrapper > a.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  width: min(418px, 100%);
  height: 64px;
  margin: 0;
  padding: 0 32px;
  border: 0;
  border-radius: 64px;
  background: #008542;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

main .section.botao-largo p.button-wrapper > a.button::after {
  flex: none;
  width: 46px;
  height: 28px;
  background: currentcolor;
  content: '';
  mask: url('../icons/seta-longa.svg') center / contain no-repeat;
}

main .section.botao-largo p.button-wrapper > a.button:is(:hover, :focus-visible) {
  background: #006c35;
}

/* gabarito `capitulo` (paginas de capitulo do relatorio de sustentabilidade,
   metadado template da pagina): a coluna de texto da producao e' de 638
   centrada a partir de 768 (medido 04/11/2026 a 1905, 1440, 1024 e 768 em
   /w/materialidade) e o texto e' 18/27 tambem no celular */
@media (width >= 768px) {
  html body.capitulo {
    --content-max-width: 638px;
  }
}

body.capitulo main .section .default-content-wrapper > p {
  font-size: 1.125rem;
  line-height: 1.5;
}