/* Sistema editorial da Bioside. Princípios do repertório, implementação própria. */
:root{--mineral:#F5F5F0;--editorial-ease:cubic-bezier(.22,1,.36,1);--editorial-revela:cubic-bezier(.4,.1,.2,1)}
.nav__grupo{border:0;background:none;font-family:inherit;cursor:pointer}.nav__grupo:disabled{cursor:default;opacity:1}.nav__sub[hidden]{display:none}
.js .nav__solucoes:not(.is-expandida) .nav__sub{opacity:0;visibility:hidden}
.js .nav__solucoes.is-expandida .nav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.js .nav__solucoes.is-expandida .nav__grupo::after{transform:rotate(-135deg) translateY(-2px)}
.home-editorial{--interno:1440px;--gutter:clamp(24px,4.45vw,72px);--altura-cabecalho:80px;background:var(--mineral);color:var(--petroleo)}

/* ================= Rodada 13: contrato de composição da home =================
   Vale para a home inteira, PT e EN, e só para ela: tudo abaixo está sob
   .home-editorial ou .home-confianca, para as seis páginas internas não
   mudarem. Nenhuma seção inventa valor de espaçamento: todo respiro sai
   desta escala.

   ESCALA VERTICAL DAS SEÇÕES, por função, não por posição:
   --secao-densa    blocos de apoio, que não abrem capítulo
   --secao-padrao   maioria das seções
   --secao-ampla    abertura de capítulo, onde a página respira de propósito

   EMENDA: cada encontro entre duas seções é UMA transição, não a soma de
   dois espaçamentos. Quando duas seções formam um conjunto (orientação e
   perguntas), a de baixo abre com --emenda-conjunto no topo, nunca com o
   próprio --secao-padrao. Quando há virada de cor de fundo, a virada já
   faz o trabalho de separar: a seção de baixo usa no máximo --secao-padrao.

   RITMO INTERNO: --r-1 a --r-6 para distância entre elementos dentro de um
   bloco (sobretítulo, título, parágrafo, lista, botão).

   GRADE: tudo que é texto ou título alinha pela calha de .interno
   (--gutter). Fundo, fotografia e mapa podem sangrar até a borda da tela;
   o conteúdo textual dentro deles, não.

   RITMO DE COR DA PÁGINA (rodada 14). O verde-água não foi aprovado como
   fundo de seção grande. Ele volta a ser cor de destaque da identidade:
   botões, links, setas, indicadores de aba ativa, números, marcadores e
   filetes. Nunca superfície de seção.

   abertura   mineral
   A Bioside  fotografia ampliada + painel carvão (metade foto, metade cor)
   soluções   petróleo
   orientação mineral, em conjunto com perguntas
   sede       carvão, com o mapa de largura total
   contato    petróleo, com o formulário em superfície clara
   rodapé     carvão

   A regra que sustenta isso: duas seções claras seguidas voltam a parecer
   um bloco só, e trocar todo verde por branco recria esse problema. Onde o
   verde saiu, entra fotografia com mais presença ou uma cor escura da
   paleta, nunca mais um mineral.

   CORES DE TEXTO PERMITIDAS POR FUNDO (medido, não estimado):
   - sobre mineral #F5F5F0: petróleo 9,97:1, --tinta-70 6,98:1. --tinta-55
     mede 4,29:1 e está proibido para texto normal. Verde sobre mineral
     mede 1,8:1: proibido para texto de qualquer tamanho, serve só como
     preenchimento de elemento gráfico com forma própria.
   - sobre petróleo #19405B: branco, #C7D8E1 e #A8C6D4, como já está. O
     verde passa (5,6:1) e é a cor dos acessos de cotação.
   - sobre carvão #0F161C: branco, #BDCED8 e o verde, todos com folga.
   - sobre o verde, quando ele for botão ou marcador: só petróleo ou
     carvão. --tinta-70 mede 3,88:1 ali e está proibido. */
/* ================= Rodada 16: altura, cor e movimento (pedido de Pedro, 18/09) =================
   Pedro pediu um design mais premium: seções quase de tela cheia, em vez de
   blocos curtos que deixam ver o começo da próxima; mais animação ligada à
   rolagem; e melhor distribuição de cor. Este bloco prevalece sobre regras
   anteriores deste contrato que conflitem com ele. Vale só para a home.

   ALTURA (desktop, a partir de 861px; no celular as seções seguem o próprio
   conteúdo e as proporções de foto já medidas não mudam):
   --tela = altura útil da janela abaixo do cabeçalho.
   Capítulos com min-height:var(--tela) e conteúdo centrado na vertical:
   abertura, empresa, cada uma das três linhas, pedido, contato.
   Seções de apoio com min-height:var(--tela-apoio) (80% da tela): perguntas, sede.

   COR, na ordem da página (claro e escuro alternam):
   abertura mineral | empresa foto + carvão | linhas mineral com foto grande |
   pedido PETRÓLEO | perguntas mineral | sede carvão + mapa | contato mineral
   com formulário branco | rodapé carvão.
   Verde continua só destaque. Sobre mineral, o link "Solicitar cotação" deixa
   de ser texto verde (1,8:1): vira texto petróleo com sublinhado verde.

   MOVIMENTO, uma linguagem só:
   - Entrada de bloco: a .revelar que já existe. Nada novo.
   - Título de capítulo: o mesmo corte de linha da abertura. Envolver cada
     linha do h2 em <span class="editorial-line"><span style="--linha:N">…</span></span>
     e pôr .titulo-capitulo no h2; a linha sobe quando o bloco .revelar pai
     ganha .is-visivel (primitiva abaixo).
   - Foto com profundidade: .foto-profundidade no contêiner com overflow
     hidden; a imagem faz uma leve aproximação conforme a seção atravessa a
     tela (primitiva abaixo, só onde o navegador tem animation-timeline).
   - O único elemento preso na tela é a coluna de fotos das três linhas no
     desktop: o texto de cada linha rola normalmente, e a foto troca por
     esmaecimento de 700ms quando a linha seguinte chega ao meio da tela. Nada
     mais se prende, não há rolagem sequestrada nem biblioteca de rolagem suave.
   - Nas linhas não existe mais link esticado sobre a faixa: nome da linha,
     "Conhecer" e "Solicitar cotação" são links explícitos.
   - Indicador de rolagem da abertura: entra 900ms depois, quando o título já
     assentou, e some quando a pessoa passa da abertura.

   MOVIMENTO REDUZIDO: nada anima nem translada; fotos trocam sem transição;
   a foto das linhas pode seguir presa (posição não é movimento).
   SEM JAVASCRIPT: tudo visível; nas linhas, cada bloco mostra a própria foto
   e nada fica preso. */
.home-editorial:not(.pagina-interna){
  --tela:calc(100svh - var(--altura-cabecalho));
  --tela-apoio:calc((100svh - var(--altura-cabecalho)) * .8);
}
/* VERDE COMO ELEMENTO DA MARCA (pedido de Pedro, 18/09): mais verde nos
   elementos, para a página ter mais cara da logo, sem nunca virar fundo de
   seção (verde grande contra petróleo dá um contraste estranho). O elemento
   é a gota facetada do próprio símbolo, extraída de img/marca/simbolo.svg
   sem redesenho, usada como máscara:
   - marcador de lista e de passo, no lugar de pontos e quadrados;
   - indicador de progresso das três linhas (gota cheia na ativa, gota apagada
     nas outras);
   - marca d'água grande e cortada, verde com baixa opacidade, em no máximo
     duas seções escuras (empresa e pedido), nunca atrás de texto;
   - números e sobretítulos em verde sobre fundo ESCURO (5,6:1 no petróleo).
   Continua proibido: fundo verde de seção e texto verde sobre mineral ou
   branco. Sobre claro, o verde só aparece como gota, filete ou botão. */
.home-editorial{--gota:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='869 311 164 223'%3E%3Cpath d='M932.355 325.152L873.324 429.953C870.227 435.449 870.238 442.246 873.355 447.742L916.309 523.402C919.391 528.82 925.012 532.148 931.117 532.148L979.754 532.148C984.91 532.148 989.805 529.75 993.059 525.629L1025.48 484.535C1029.66 479.223 1030.5 471.914 1027.633 465.75L962.652 326.406C956.688 313.617 939.262 312.918 932.355 325.184Z'/%3E%3C/svg%3E")}
.gota{display:inline-block;flex:none;width:.62em;height:.84em;background:var(--verde);-webkit-mask:var(--gota) center/contain no-repeat;mask:var(--gota) center/contain no-repeat}
.gota--apagada{background:transparent;box-shadow:none;outline:0;-webkit-mask:none;mask:none;position:relative}
.gota--apagada::before{content:'';position:absolute;inset:0;background:var(--verde);opacity:.35;-webkit-mask:var(--gota) center/contain no-repeat;mask:var(--gota) center/contain no-repeat}

/* Primitiva: título de capítulo com corte de linha. */
@media(prefers-reduced-motion:no-preference){
  .js .titulo-capitulo .editorial-line>span{transform:translateY(110%);transition:transform 680ms var(--editorial-ease);transition-delay:calc(60ms + var(--linha,0)*90ms)}
  .js .is-visivel .titulo-capitulo .editorial-line>span,
  .js .titulo-capitulo.is-visivel .editorial-line>span,
  .js .sem-entrada .titulo-capitulo .editorial-line>span{transform:none}
}
/* Primitiva: foto com profundidade ligada à rolagem. */
@keyframes foto-profundidade{from{transform:scale(1.1)}to{transform:scale(1)}}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .foto-profundidade img{animation:foto-profundidade linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  }
}

.home-editorial{
  --r-1:8px; --r-2:16px; --r-3:24px; --r-4:32px; --r-5:48px; --r-6:64px;
  --secao-densa:clamp(48px,5vw,72px);
  --secao-padrao:clamp(64px,6.5vw,96px);
  --secao-ampla:clamp(80px,8vw,120px);
  --emenda-conjunto:clamp(24px,2.5vw,40px);
}
.home-editorial .cabecalho{background:var(--mineral);border-bottom-color:rgba(25,64,91,.14)}
.home-editorial .cabecalho.is-solido{background:rgba(245,245,240,.97)}
.home-editorial .cabecalho .marca__logo{width:172px}
.home-editorial .cabecalho .marca__logo--clara{display:none}
.home-editorial .cabecalho .marca__logo--escura{display:block}
.home-editorial .cabecalho .nav__link,.home-editorial .cabecalho .nav__grupo{color:var(--petroleo)}
.home-editorial .cabecalho .nav__sub .nav__link{color:white}
.home-editorial .nav{gap:32px}.home-editorial .nav__lista{gap:28px}
.home-editorial .nav__cta{background:var(--verde);color:var(--petroleo);border-radius:0;font-weight:500}.home-editorial .nav__cta:hover{background:#9ED6BA}
.home-editorial .idioma{border:0;gap:2px}.home-editorial .idioma__atual{background:transparent;color:var(--petroleo);border-bottom:1px solid var(--petroleo)}.home-editorial .idioma__troca{color:#566771}
.home-editorial .cabecalho :focus-visible{outline-color:var(--petroleo)}.home-editorial .cabecalho .nav__sub :focus-visible{outline-color:var(--verde)}
.home-editorial .menu-botao__barra{background:var(--petroleo)}
.editorial-hero{padding-top:var(--altura-cabecalho)}
.editorial-hero__grid{display:grid;grid-template-columns:54% 46%;max-width:1680px;margin:auto}
.editorial-hero__copy{padding:52px 40px 52px max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)));align-self:center}
.editorial-kicker{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;line-height:1.4;margin-bottom:28px}
.editorial-kicker::before{content:'';width:24px;height:1px;background:currentColor}
.editorial-hero__title{font-size:clamp(48px,5.5vw,86px);font-weight:500;letter-spacing:-.062em;line-height:1.035;text-wrap:initial}
.editorial-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.editorial-line>span{display:block}
.editorial-hero__support{margin:26px 0 30px;max-width:46ch;color:#4A606C;font-size:17px;line-height:1.65}
.editorial-button{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;min-height:54px;padding:0 22px;background:var(--petroleo);color:white;font-size:14px;font-weight:500;transition:background 200ms,transform 200ms}
.editorial-button svg{width:22px;height:22px;transition:transform 240ms var(--editorial-ease)}.editorial-button:hover{background:#245675}.editorial-button:hover svg,.editorial-button:focus-visible svg{transform:translateX(5px)}.editorial-button:active{transform:translateY(1px)}
.editorial-hero__image{position:relative;margin:0;overflow:hidden;min-height:560px;background:#0C2432}
.editorial-hero__image>img{height:100%;width:100%;position:absolute;object-fit:cover;object-position:53% 48%}
.editorial-hero__image figcaption{position:absolute;bottom:0;left:0;right:0;padding:22px 28px;color:white;background:linear-gradient(transparent,rgba(6,24,35,.9));display:flex;justify-content:space-between;align-items:end;gap:24px}
.editorial-hero__image figcaption span:first-child{font-size:17px;font-weight:500}.editorial-hero__image figcaption span:last-child{max-width:23ch;font-size:11px;color:#D5E4E9;line-height:1.45;text-align:right}
.editorial-hero__corner{position:absolute;top:26px;left:26px;width:44px;height:44px;border-top:1px solid var(--verde);border-left:1px solid var(--verde)}
.editorial-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1440px;padding-inline:var(--gutter);margin:auto}
.editorial-index a{display:flex;align-items:center;gap:18px;min-height:84px;border-right:1px solid rgba(25,64,91,.16);padding:18px 32px;font-size:16px;transition:background 200ms}
.editorial-index a:first-child{padding-left:0}.editorial-index a:last-child{border-right:0;padding-right:0}.editorial-index__num{font-size:10px;color:#667A84}
.editorial-index svg{width:18px;height:18px;margin-left:auto;transition:transform 240ms}.editorial-index a:hover svg{transform:translateX(4px)}.editorial-index a:hover{background:rgba(134,199,167,.1)}
.editorial-solutions{padding-block:var(--secao-padrao);background:var(--petroleo);color:white}.editorial-solutions :focus-visible{outline-color:var(--verde)}
.editorial-section-head{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:end;padding-bottom:var(--r-5)}.editorial-section-head .editorial-kicker{color:var(--verde);margin-bottom:22px}
.home-editorial h2{font-weight:500;font-size:clamp(36px,3.7vw,56px);line-height:1.1;letter-spacing:-.046em}
.editorial-section-head>p{max-width:32ch;justify-self:end;color:#C7D8E1;font-size:16px;padding-bottom:4px}
.editorial-about{padding:112px 0}.editorial-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.editorial-about__image{position:relative;margin:0}.editorial-about__image img{width:100%;height:440px;object-fit:cover}.editorial-about__image figcaption{margin-top:14px;font-size:11px;color:#607783}
.editorial-about__copy h2{margin-bottom:30px}.editorial-about__copy>p:not(.editorial-kicker){font-size:16px;line-height:1.8;max-width:45ch}.editorial-about__secondary{color:#5A6D78;margin-top:18px}.editorial-about__copy .link-seta{margin-top:24px;font-size:14px}
.editorial-guidance{border-block:1px solid rgba(25,64,91,.15)}.editorial-guidance .interno{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:26px}.editorial-guidance p{font-size:17px}
.editorial-guidance a{display:inline-flex;gap:24px;align-items:center;font-size:14px;font-weight:500;min-height:44px;border-bottom:1px solid var(--petroleo)}.editorial-guidance svg{height:20px;width:20px}
/* Rodada 15: o verde-água saiu como fundo do fecho (ver contrato no topo
   do arquivo) e volta a ser destaque. O fecho passa para petróleo, com o
   formulário numa caixa branca por cima. A chamada (titulo-2) e o rótulo
   (sobretitulo) usam os tons já permitidos sobre petróleo: sobretitulo em
   verde, como o kicker de .editorial-solutions na mesma cor de fundo;
   titulo-2 e a linha de apoio em branco/#C7D8E1. O botão de envio segue
   verde (dentro da caixa branca, herdado de .botao--acento em main.css) e
   continua sendo o único destaque de ação da seção, não a superfície.
   A passagem para o rodapé virou escuro-para-escuro (petróleo → carvão):
   um filete verde de 1px no topo do rodapé marca a emenda sem abrir
   espaçamento novo. */
.home-editorial:not(.pagina-interna) .secao--contato{background:var(--petroleo);padding-block:var(--secao-padrao)}
.home-editorial:not(.pagina-interna) .contato{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:64px}
.home-editorial:not(.pagina-interna) .contato__intro .sobretitulo{color:var(--verde)}
.home-editorial:not(.pagina-interna) .contato__intro .titulo-2{color:var(--claro);max-width:12ch;font-size:clamp(36px,3.7vw,56px)}
.home-editorial:not(.pagina-interna) .contato__linha{margin-top:var(--r-2);font-size:15px;font-weight:500;color:#C7D8E1;max-width:32ch}
.home-editorial:not(.pagina-interna) .formulario-caixa{padding:32px;border:0;border-radius:0;background:var(--claro);box-shadow:0 24px 60px -34px rgba(15,22,28,.28)}.home-editorial:not(.pagina-interna) .formulario{gap:18px 20px}
.home-editorial:not(.pagina-interna) .campo input,.home-editorial:not(.pagina-interna) .campo select,.home-editorial:not(.pagina-interna) .campo textarea{border-radius:0;background:#FAFBF9}.home-editorial:not(.pagina-interna) .campo label{font-size:12px}.home-editorial:not(.pagina-interna) .campo__ajuda{font-size:11px;line-height:1.5}
.home-editorial:not(.pagina-interna) .aviso-previa{font-size:11px;background:#F0F4F2;border-radius:0;margin-bottom:24px}.home-editorial:not(.pagina-interna) .secao--contato>.canto{display:none}
.home-editorial:not(.pagina-interna) .rodape{padding-block:var(--secao-densa);background:var(--escuro);border-top:1px solid rgba(134,199,167,.22)}.home-editorial:not(.pagina-interna) .rodape .marca__logo{width:180px}.home-editorial:not(.pagina-interna) .rodape__copy{color:#BDCED8}
/* .contato, .rodape e o formulário também são montados pelas 6 páginas
   internas (o body delas carrega "home-editorial pagina-interna", não só
   "pagina-interna"): sem este bloco, as regras de fecho acima vazavam para
   ARLA 32/Ureia/Bioatlas. Mantém aqui, intacto, o valor que essas páginas
   já tinham antes desta rodada. */
.home-editorial.pagina-interna .secao--contato{background:var(--mineral);padding-block:88px}
.home-editorial.pagina-interna .contato{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px}
.home-editorial.pagina-interna .contato__intro .titulo-2{color:var(--petroleo);max-width:13ch;font-size:clamp(36px,3.7vw,56px)}
.home-editorial.pagina-interna .contato__linha{font-size:16px;color:#526B77}
.home-editorial.pagina-interna .formulario-caixa{padding:32px;border:1px solid #D8E0DF;border-radius:0;background:#FFF;box-shadow:none}.home-editorial.pagina-interna .formulario{gap:18px 20px}
.home-editorial.pagina-interna .campo input,.home-editorial.pagina-interna .campo select,.home-editorial.pagina-interna .campo textarea{border-radius:0;background:#FAFBF9}.home-editorial.pagina-interna .campo label{font-size:12px}.home-editorial.pagina-interna .campo__ajuda{font-size:11px;line-height:1.5}
.home-editorial.pagina-interna .aviso-previa{font-size:11px;background:#F0F4F2;border-radius:0;margin-bottom:24px}.home-editorial.pagina-interna .secao--contato>.canto{display:none}
.home-editorial.pagina-interna .rodape{padding-block:40px;background:var(--escuro)}.home-editorial.pagina-interna .rodape .marca__logo{width:180px}.home-editorial.pagina-interna .rodape__copy{color:#BDCED8}
@media(max-width:1100px){.home-editorial.pagina-interna .contato{gap:40px}}
@media(max-width:860px){.home-editorial.pagina-interna .contato{grid-template-columns:1fr;gap:36px}.home-editorial.pagina-interna .contato__intro .titulo-2{max-width:22ch}}
@media(max-width:700px){
.home-editorial.pagina-interna .secao--contato{padding:52px 0}.home-editorial.pagina-interna .contato__intro .titulo-2{max-width:16ch;font-size:36px}.home-editorial.pagina-interna .formulario-caixa{padding:20px}.home-editorial.pagina-interna .formulario{gap:16px}.home-editorial.pagina-interna .rodape{padding-block:30px}
}
@keyframes editorial-line{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes editorial-photo{from{opacity:.3;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
.js .editorial-line>span{animation:editorial-line 680ms var(--editorial-ease) both;animation-delay:calc(70ms + var(--linha)*90ms)}
.js .editorial-hero__image img{animation:editorial-photo 1000ms var(--editorial-revela) both}
.js .editorial-hero__support,.js .editorial-hero__copy .editorial-button{animation:sobe 560ms var(--editorial-ease) 260ms both}}
@media(max-width:1100px){
.home-editorial .nav{gap:20px}.home-editorial .nav__lista{gap:18px}.editorial-hero__copy{padding-block:52px;padding-right:28px}.editorial-hero__image{min-height:560px}
.home-editorial:not(.pagina-interna) .contato{gap:40px}}
@media(max-width:860px){
.home-editorial{--altura-cabecalho:68px}.home-editorial .cabecalho .marca__logo{width:152px}.home-editorial .cabecalho.is-menu-aberto{background:var(--petroleo)}
.home-editorial .cabecalho.is-menu-aberto .marca__logo--clara{display:block}.home-editorial .cabecalho.is-menu-aberto .marca__logo--escura{display:none}
.home-editorial .cabecalho.is-menu-aberto .nav__link,.home-editorial .cabecalho.is-menu-aberto .nav__grupo{color:white}
.home-editorial .cabecalho.is-menu-aberto .menu-botao__barra{background:white}.home-editorial .cabecalho.is-menu-aberto :focus-visible{outline-color:var(--verde)}
.home-editorial .nav{background:var(--petroleo)}.home-editorial .nav .idioma__atual{color:var(--verde);border-color:var(--verde)}.home-editorial .nav .idioma__troca{color:white}.home-editorial .nav__cta{color:var(--petroleo);background:var(--verde)}
.editorial-hero__title{font-size:clamp(40px,5.8vw,54px)}.editorial-hero__support{font-size:15px}.editorial-hero__image{min-height:520px}
.editorial-hero__image figcaption{padding:20px;display:block}.editorial-hero__image figcaption span{display:block}.editorial-hero__image figcaption span:last-child{text-align:left;margin-top:4px}
.editorial-index a{padding-inline:18px;gap:10px;font-size:14px}.editorial-section-head{gap:32px;grid-template-columns:1.4fr 1fr}
.editorial-about{padding-block:72px}.editorial-about__image img{height:380px}.editorial-about__grid{gap:32px}
.home-editorial:not(.pagina-interna) .contato{grid-template-columns:1fr;gap:36px}.home-editorial:not(.pagina-interna) .contato__intro .titulo-2{max-width:22ch}}
@media(max-width:700px){
.editorial-hero__grid{grid-template-columns:1fr}.editorial-hero__copy{padding:38px var(--gutter) 32px}.editorial-kicker{font-size:10px;margin-bottom:22px}
.editorial-hero__title{font-size:clamp(43px,10.8vw,72px);letter-spacing:-.055em}.editorial-hero__support{max-width:42ch;margin:22px 0;font-size:15px}
.editorial-button{min-height:50px;font-size:13px;padding-inline:20px;gap:24px}.editorial-hero__image{min-height:0;height:230px}.editorial-hero__image>img{object-position:50% 62%}
.editorial-hero__image figcaption{display:flex;padding:18px 24px}.editorial-hero__image figcaption span:last-child{text-align:right}.editorial-hero__corner{left:24px;top:18px;width:28px;height:28px}
.editorial-index{padding-inline:0}.editorial-index a,.editorial-index a:first-child,.editorial-index a:last-child{padding:14px 12px;display:grid;grid-template-columns:1fr auto;gap:5px 4px;min-height:83px;align-content:center;font-size:12px;line-height:1.3}
.editorial-index__num{grid-column:1/-1}.editorial-index svg{width:14px;height:14px}.editorial-solutions{padding:56px 0}
.editorial-section-head{grid-template-columns:1fr;gap:20px;padding-bottom:30px}.home-editorial h2{font-size:36px}.editorial-section-head>p{justify-self:start;max-width:34ch;font-size:14px}
.editorial-about{padding:56px 0}.editorial-about__grid{grid-template-columns:1fr;gap:36px}.editorial-about__image img{height:260px;object-position:center 42%}.editorial-about__copy h2{margin-bottom:22px}
.editorial-about__copy>p:not(.editorial-kicker){font-size:15px}.editorial-guidance .interno{display:block;padding-block:24px}.editorial-guidance p{font-size:15px}.editorial-guidance a{margin-top:8px;font-size:13px}
.home-editorial:not(.pagina-interna) .contato__intro .titulo-2{max-width:16ch;font-size:36px}.home-editorial:not(.pagina-interna) .formulario-caixa{padding:20px}.home-editorial:not(.pagina-interna) .formulario{gap:16px}}
@media(prefers-reduced-motion:reduce){
.home-editorial *,.home-editorial *::before,.home-editorial *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Estados ocultos prevalecem sobre os layouts flex/grid. */
.resumo[hidden]{display:none}
.home-editorial .resumo{border-radius:0}
@media(max-width:860px){
 .js .nav:not(.is-aberto) .nav__solucoes .nav__sub{visibility:hidden;opacity:0}
}

.editorial-about__grid{align-items:start}
.editorial-about__copy{padding-top:42px}
@media(max-width:700px){.editorial-about__copy{padding-top:0}}
html:not(.js) .home-editorial .cabecalho{background:var(--mineral)}
html:not(.js) .home-editorial .editorial-hero{padding-top:0}
@media(max-width:860px){
 html:not(.js) .nav{height:auto}
 html:not(.js) .home-editorial .cabecalho .nav__sub .nav__link{color:var(--petroleo)}
 html:not(.js) .home-editorial .nav .idioma__atual{color:var(--petroleo);border-color:var(--petroleo)}
 html:not(.js) .home-editorial .nav .idioma__troca{color:var(--petroleo)}
}

#formulario button[type="submit"]{transition:transform 120ms,filter 120ms}
#formulario button[type="submit"].is-acionado{transform:translateY(1px);filter:brightness(.9)}
@media(prefers-reduced-motion:reduce){
  #formulario button[type="submit"].is-acionado{transform:none}
}

/* Rodada 6. Legenda da abertura: o degradê só fechava abaixo das letras e o topo
   do texto ficava entre 1,8 e 2,3:1 sobre os grânulos claros. Agora a faixa já
   está opaca na altura do texto e começa a esmaecer acima dele. */
.editorial-hero__image figcaption{padding-top:64px;background:linear-gradient(to top,rgba(6,24,35,.94) 0%,rgba(6,24,35,.9) 62%,rgba(6,24,35,0) 100%)}
.editorial-hero__image figcaption span:last-child{font-size:12px;color:#E4EEF1}
/* A entrada da foto e a abertura das fotos das faixas usam uma curva que
   distribui o movimento: com --editorial-ease a foto chegava a 93% de
   opacidade aos 396 ms de 1000 e a revelação quase não se percebia. */

/* Rodada 15, caminho A: as faixas das três linhas ficam dentro da seção
   #bioside, logo abaixo do painel carvão. Sem o título grande que tinham
   antes, abrem com um rótulo curto e respiro de seção densa, em vez do
   --secao-padrao de uma seção que começava do zero. Só a home. */
.home-editorial:not(.pagina-interna) .editorial-solutions{padding-top:var(--secao-densa)}
.home-editorial:not(.pagina-interna) .editorial-solutions__rotulo{margin-bottom:var(--r-4)}

/* ================= Rodada 17: acabamento premium (pedido de Pedro, 18/09/2026) =================
   Aplica o contrato das Rodadas 13/16 e a marca verde do bloco acima:
   abertura em tela cheia com indicador de rolagem, "as três linhas" no
   padrão texto-rola-foto-fica, contato/rodapé reequilibrados. Só a home
   (:not(.pagina-interna)); as seis páginas internas reaproveitam
   .editorial-hero* e não podem herdar nada daqui. */

/* ---- Abertura: tela cheia e indicador de rolagem, só desktop ---- */
/* A regra sem media fica ANTES da com media: mesma especificidade, então a
   ordem no arquivo decide, e display:flex em >=861px precisa vir por último
   para vencer o display:none de base. Ver bug corrigido na Rodada 17b. */
/* Alinhado à mesma calha esquerda de .editorial-hero__copy (mesma fórmula de
   padding), não centralizado na largura toda: centralizar cruzava para cima
   da fotografia escura à direita, onde tinta-70 sobre mineral vira tinta-70
   sobre foto escura e o contraste medido deixa de valer. */
.home-editorial:not(.pagina-interna) .editorial-scroll-dica{
  display:none;position:absolute;left:max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)));bottom:36px;
  flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none;z-index:2;
}
@media(min-width:861px){
  .home-editorial:not(.pagina-interna) .editorial-hero{position:relative}
  .home-editorial:not(.pagina-interna) .editorial-hero__grid{min-height:var(--tela)}
  .home-editorial:not(.pagina-interna) .editorial-hero__image{min-height:var(--tela)}
  .home-editorial:not(.pagina-interna) .editorial-scroll-dica{display:flex}
}
.home-editorial:not(.pagina-interna) .editorial-scroll-dica__texto{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-70);
}
.home-editorial:not(.pagina-interna) .editorial-scroll-dica__filete{
  position:relative;width:1px;height:34px;background:rgba(25,64,91,.22);
}
.home-editorial:not(.pagina-interna) .editorial-scroll-dica__filete .gota{position:absolute;top:0;left:50%;margin-left:-.31em}
/* !important: a animação de entrada (fill-mode both) segura opacity:1 com
   prioridade maior que uma regra comum, e sem isto o "some ao rolar" nunca
   vencia depois que a entrada já tinha rodado. */
.home-editorial:not(.pagina-interna) .editorial-scroll-dica.is-oculto{opacity:0!important}
@media(prefers-reduced-motion:no-preference){
  .home-editorial:not(.pagina-interna) .editorial-scroll-dica{transition:opacity 320ms var(--editorial-ease)}
  .js .editorial-scroll-dica{animation:sobe 640ms var(--editorial-ease) 900ms both}
  @keyframes editorial-scroll-gota{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}88%{opacity:1}100%{transform:translateY(24px);opacity:0}}
  .js .editorial-scroll-dica__filete .gota{animation:editorial-scroll-gota 1900ms ease-in-out 1700ms infinite}
}

/* ---- As três linhas: texto rola, foto fica ---- */
.home-editorial:not(.pagina-interna) .editorial-solutions{background:var(--mineral);color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .editorial-solutions :focus-visible{outline-color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .editorial-solutions__rotulo{color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .editorial-solutions__rotulo::before{background:var(--verde)}

.home-editorial:not(.pagina-interna) .editorial-linha{display:flex;flex-direction:column;gap:var(--r-4);padding-block:var(--secao-densa)}
.home-editorial:not(.pagina-interna) .editorial-linha+.editorial-linha{border-top:1px solid rgba(25,64,91,.12)}
.home-editorial:not(.pagina-interna) .editorial-linha__marca{display:block;margin-bottom:var(--r-1);color:var(--petroleo);opacity:.62;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.home-editorial:not(.pagina-interna) .editorial-linha__nome{font-size:clamp(28px,2.75vw,40px);letter-spacing:-.04em;font-weight:500;line-height:1.1}
.home-editorial:not(.pagina-interna) .editorial-linha__nome a{color:inherit}
.home-editorial:not(.pagina-interna) .editorial-linha__nome a:hover,.home-editorial:not(.pagina-interna) .editorial-linha__nome a:focus-visible{color:var(--petroleo);text-decoration:underline;text-decoration-color:var(--verde)}
.home-editorial:not(.pagina-interna) .editorial-linha__detalhe{font-size:15px;color:var(--petroleo);margin-top:var(--r-2)}
.home-editorial:not(.pagina-interna) .editorial-linha__texto{font-size:14px;color:var(--tinta-70);line-height:1.65;max-width:38ch;margin-top:6px}
.home-editorial:not(.pagina-interna) .editorial-linha__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:var(--r-3)}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:500;color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer svg{width:18px;height:18px;color:var(--verde);transition:transform 240ms var(--editorial-ease)}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer:hover svg,.home-editorial:not(.pagina-interna) .editorial-linha__conhecer:focus-visible svg{transform:translateX(5px)}
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--petroleo);text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:3px;text-underline-offset:6px;transition:text-decoration-color 200ms}
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao:hover,.home-editorial:not(.pagina-interna) .editorial-linha__cotacao:focus-visible{text-decoration-color:var(--petroleo)}

.home-editorial:not(.pagina-interna) .editorial-linha__foto-movel{max-width:960px;aspect-ratio:16/9;overflow:hidden;background:#0C2432}
.home-editorial:not(.pagina-interna) .editorial-linha__foto-movel picture,
.home-editorial:not(.pagina-interna) .editorial-linha__foto-movel img{display:block;width:100%;height:100%;object-fit:cover}

.home-editorial:not(.pagina-interna) .editorial-linhas__presa{display:none}
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  .home-editorial:not(.pagina-interna) .editorial-linhas.editorial-linhas--presa-pronta{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(40px,4vw,80px);align-items:start}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha{min-height:var(--tela);justify-content:center;padding-block:0;border-top:0}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha__foto-movel{display:none}
  /* Cada linha ocupa uma tela: o nome ganha escala de capítulo, senão a
     coluna fica um bloco pequeno perdido num campo mineral. */
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha__nome{font-size:clamp(48px,5.2vw,76px);letter-spacing:-.05em;line-height:1.02}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha__marca{font-size:11px;margin-bottom:var(--r-2)}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha__detalhe{font-size:18px;margin-top:var(--r-3)}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha__texto{font-size:16px;max-width:40ch}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linhas__presa{
    display:flex;flex-direction:column;position:sticky;top:var(--altura-cabecalho);height:var(--tela);
  }
}
.home-editorial:not(.pagina-interna) .editorial-linhas__presa-fotos{position:relative;flex:1;overflow:hidden;background:#0C2432}
.home-editorial:not(.pagina-interna) .editorial-linhas__presa-foto{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.04);transition:opacity 700ms var(--editorial-ease),transform 700ms var(--editorial-ease)}
.home-editorial:not(.pagina-interna) .editorial-linhas__presa-foto.is-ativa{opacity:1;transform:scale(1);z-index:1}
.home-editorial:not(.pagina-interna) .editorial-linhas__presa-foto picture,
.home-editorial:not(.pagina-interna) .editorial-linhas__presa-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* Progresso sobre a própria foto: antes dividia a altura da coluna presa
   com ela e ficava rente ao fim da tela. O degradê só escurece a base. */
.home-editorial:not(.pagina-interna) .editorial-linhas__presa-fotos::after{content:'';position:absolute;inset:auto 0 0 0;height:30%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(6,24,35,.78),rgba(6,24,35,0))}
.home-editorial:not(.pagina-interna) .editorial-linhas__progresso{position:absolute;left:clamp(20px,2.4vw,32px);bottom:clamp(18px,2.4vw,28px);z-index:3;display:flex;gap:24px}
.home-editorial:not(.pagina-interna) .editorial-linhas__passo{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);transition:color 300ms}
.home-editorial:not(.pagina-interna) .editorial-linhas__passo.is-ativa{color:#fff}
@media(prefers-reduced-motion:reduce){
  .home-editorial:not(.pagina-interna) .editorial-linhas__presa-foto{transition:none}
}

/* ---- Contato: petróleo -> mineral, formulário em caixa branca ---- */
.home-editorial:not(.pagina-interna) .secao--contato{background:var(--mineral)}
.home-editorial:not(.pagina-interna) .contato__intro .sobretitulo{display:flex;align-items:center;gap:.7em;color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .contato__intro .sobretitulo::before{content:'';width:24px;height:1px;background:var(--verde)}
.home-editorial:not(.pagina-interna) .contato__intro .titulo-2{color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .contato__linha{color:var(--tinta-70)}
.home-editorial:not(.pagina-interna) .formulario-caixa{border:1px solid rgba(25,64,91,.12)}
@media(min-width:861px){
  .home-editorial:not(.pagina-interna) .secao--contato{min-height:var(--tela);display:flex;align-items:center}
  .home-editorial:not(.pagina-interna) .secao--contato>.interno{width:100%}
}

/* ---- Rodapé: continua carvão; a virada clara->escura do contato já separa
   as seções, sem precisar de um filete extra no topo. ---- */
.home-editorial:not(.pagina-interna) .rodape{border-top:0}

/* ---------- Rodada 17 (18/09): abertura até a borda e linhas com conteúdo ----------
   A grade da abertura tinha largura máxima de 1680px: em 1920px a foto parava
   120px antes da borda direita, em 2560px, 440px. Na home a foto vai até a
   borda em qualquer largura; o texto continua preso à calha pela fórmula de
   .editorial-hero__copy. As páginas internas não mudam. */
.home-editorial:not(.pagina-interna) .editorial-hero__grid{max-width:none}

/* Cada linha ocupava uma tela com marca, nome, uma frase e dois links. Agora
   tem uma definição curta e uma ficha de três linhas, com conteúdo tirado das
   páginas de ARLA 32, ureia e Bioatlas. A gota é o marcador de cada rótulo. */
.home-editorial:not(.pagina-interna) .editorial-linha__definicao{margin-top:var(--r-2);max-width:46ch;font-size:16px;line-height:1.65;color:var(--tinta-70)}
.home-editorial:not(.pagina-interna) .editorial-linha__ficha{margin:var(--r-3) 0 0;max-width:46ch;border-top:1px solid rgba(25,64,91,.14)}
.home-editorial:not(.pagina-interna) .editorial-linha__ficha>div{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:var(--r-2);align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(25,64,91,.14)}
.home-editorial:not(.pagina-interna) .editorial-linha__ficha dt{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .editorial-linha__ficha dt .gota{font-size:13px}
.home-editorial:not(.pagina-interna) .editorial-linha__ficha dd{margin:0;font-size:15px;line-height:1.5;color:var(--petroleo)}
@media(max-width:480px){
  .home-editorial:not(.pagina-interna) .editorial-linha__ficha>div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* Celular, sem JavaScript ou com movimento reduzido: a foto própria de cada
   linha abre o bloco e ocupa a coluna inteira. Antes vinha depois dos links,
   estreita e centralizada. */
.home-editorial:not(.pagina-interna) .editorial-linha__foto-movel{order:-1;width:100%;max-width:none;align-self:stretch;margin:0}

/* ---------- Rodada 18 (18/09): ações das linhas com cara de botão ----------
   Pedro: "Conhecer" e "Solicitar cotação" não pareciam clicáveis (texto com
   seta e texto sublinhado). Viram botões com hierarquia: cotação é o
   principal, preenchido de verde (a ação para a qual o verde está
   reservado), texto carvão; conhecer é o secundário, contorno petróleo que
   se preenche no hover. Cantos retos, como os demais botões da marca. */
.home-editorial:not(.pagina-interna) .editorial-linha__acoes{gap:12px 14px}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer,
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao{
  display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:52px;padding:0 22px;border:1.5px solid transparent;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:background 200ms,color 200ms,border-color 200ms,transform 200ms}
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao{background:var(--verde);border-color:var(--verde);color:var(--escuro)}
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao:hover{background:#9ED6BA;border-color:#9ED6BA;color:var(--escuro)}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer{background:transparent;border-color:var(--petroleo);color:var(--petroleo)}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer svg{color:currentColor}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer:hover{background:var(--petroleo);color:#fff}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer:focus-visible,
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao:focus-visible{outline:2px solid var(--petroleo);outline-offset:3px}
.home-editorial:not(.pagina-interna) .editorial-linha__conhecer:active,
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao:active{transform:translateY(1px)}
@media(max-width:480px){
  .home-editorial:not(.pagina-interna) .editorial-linha__conhecer,
  .home-editorial:not(.pagina-interna) .editorial-linha__cotacao{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .home-editorial:not(.pagina-interna) .editorial-linha__conhecer:active,
  .home-editorial:not(.pagina-interna) .editorial-linha__cotacao:active{transform:none}
}

.home-editorial:not(.pagina-interna) .editorial-linha__cotacao svg{width:18px;height:18px;color:currentColor;transition:transform 240ms var(--editorial-ease)}
.home-editorial:not(.pagina-interna) .editorial-linha__cotacao:hover svg,.home-editorial:not(.pagina-interna) .editorial-linha__conhecer:hover svg{transform:translateX(4px)}

/* ---------- Rodada 19 (21/09): zigue-zague com a mesma proporção ----------
   A abertura dividia em 54/46 (foto à direita, 46%) e a seção da empresa em
   53/47 (foto à esquerda, 53%). Os lados alternavam, mas as fotos tinham
   tamanhos diferentes e as linhas de corte caíam a 1% uma da outra, o que
   lia como desalinhamento. Agora as três seções com foto usam a MESMA
   proporção, 54% de fotografia e 46% de texto, alternando o lado:
   abertura foto à direita, empresa foto à esquerda, linhas foto à direita.
   Só na home; as páginas internas seguem com a proporção delas. */
/* Rodada 20: 50/50. Com 54% de foto, a borda interna caía em 46% na
   abertura e em 54% na empresa: duas linhas espelhadas, não a mesma.
   Em 50/50 a linha é a mesma em todas as seções e as fotos mantêm o
   mesmo tamanho, alternando só o lado. */
@media(min-width:701px){
.home-editorial:not(.pagina-interna) .editorial-hero__grid{grid-template-columns:50% 50%}
}
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  .home-editorial:not(.pagina-interna) .editorial-linhas.editorial-linhas--presa-pronta{grid-template-columns:minmax(0,.5fr) minmax(0,.5fr)}
}

/* A grade das linhas saiu de dentro de .interno (rodada 19): assim a foto
   sangra até a borda direita, como a da abertura e a da empresa, em vez de
   parar na calha (media 47% da tela em 1440 e 34% em 1920). O rótulo
   continua dentro de .interno. Fora do modo de foto presa, a grade volta a
   se comportar como .interno. */
.home-editorial:not(.pagina-interna) .editorial-linhas{max-width:var(--interno);margin-inline:auto;padding-inline:var(--gutter)}
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  .home-editorial:not(.pagina-interna) .editorial-linhas.editorial-linhas--presa-pronta{
    max-width:none;margin-inline:0;padding-inline:0;gap:0;
    grid-template-columns:50% 50%}
  .home-editorial:not(.pagina-interna) .editorial-linhas--presa-pronta .editorial-linha{
    padding-left:max(var(--gutter),calc((100vw - var(--interno))/2 + var(--gutter)));
    padding-right:clamp(32px,4vw,72px)}
}