/* Direção fotográfica das frentes: ARLA, Bioatlas e home.
   Escopo: body.frentes-fotografia, com classes próprias (frente-*, home-frente*).
   Conteúdo visível é o padrão. Estados ocultos só existem quando o script
   põe .frentes-fotografia--anima no body. Galeria sem JS mostra só a primeira
   foto e oculta os botões. Com reduced-motion, o estado final é estático. */

.frentes-fotografia{--fr-fundo:#12303F;--fr-moldura:#0C2432;--fr-texto-claro:#BDCED8;--fr-linha:rgba(255,255,255,.16)}
.frentes-fotografia [hidden]{display:none!important}

/* Rótulos e textos em 16px nas seções novas. O kicker padrão do editorial fica abaixo disso. */
.frentes-fotografia :is(.frente-contexto,.frente-fornecimento,.frente-produto,.frente-logistica,.home-fotografia__frentes) .editorial-kicker{font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:none;margin-bottom:0}

.frente-selo{display:inline-block;margin:14px 0 0;font-size:16px;line-height:1.4;color:var(--tinta-70)}

/* Links de apoio com a mesma linguagem nas três páginas. */
.frente-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding-bottom:4px;border-bottom:1px solid var(--verde);font-size:16px;font-weight:600;color:var(--mineral);text-decoration:none}
.frente-link span{transition:transform .3s ease}
.frente-link:hover span,
.frente-link:focus-visible span{transform:translateX(4px)}
.frente-link:focus-visible{outline:2px solid var(--verde);outline-offset:4px}

/* ================= ARLA: contexto com galeria de dois enquadramentos ================= */
.frente-contexto{background:var(--fr-fundo);color:var(--mineral);padding:clamp(64px,7vw,104px) 0}
.frente-contexto__grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.frente-contexto .editorial-kicker{color:var(--verde)}
.frente-contexto h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--mineral)}
.frente-contexto__intro{margin:20px 0 0;font-size:16px;line-height:1.7;color:var(--fr-texto-claro);max-width:46ch}
.frente-contexto__lista{list-style:none;margin:32px 0 0;padding:0}
.frente-contexto__item{padding:20px 0;border-top:1px solid var(--fr-linha)}
.frente-contexto__item:last-child{border-bottom:1px solid var(--fr-linha)}
.frente-contexto__item p:not(.editorial-kicker){margin:10px 0 0;font-size:16px;line-height:1.65;color:var(--fr-texto-claro)}

.frente-galeria__quadro{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--fr-moldura)}
.frente-galeria__foto{margin:0;height:100%}
.frente-galeria__foto picture{display:block;height:100%}
.frente-galeria__foto img{display:block;width:100%;height:100%;object-fit:cover}
.frente-galeria--js .frente-galeria__foto{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 450ms ease,visibility 450ms ease}
.frente-galeria--js .frente-galeria__foto.is-ativa{opacity:1;visibility:visible}
.frente-galeria__controles{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.frente-galeria__botao{min-height:48px;padding:10px 18px;border:1px solid rgba(245,245,240,.4);border-radius:999px;background:transparent;color:var(--mineral);font:inherit;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.frente-galeria__botao:hover{border-color:var(--mineral)}
.frente-galeria__botao[aria-pressed="true"]{background:var(--mineral);border-color:var(--mineral);color:var(--fr-fundo)}
.frente-galeria__botao:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.frente-galeria__estado{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--fr-texto-claro)}

/* ================= ARLA: fornecimento com o isotanque prata ================= */
.frente-fornecimento{background:var(--mineral);color:var(--petroleo);padding:clamp(64px,7vw,104px) 0}
.frente-fornecimento__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.frente-fornecimento__figura{margin:0}
.frente-fornecimento__moldura{overflow:hidden;aspect-ratio:4/3;background:var(--fr-moldura)}
.frente-fornecimento__moldura picture{display:block;height:100%}
.frente-fornecimento__moldura img{display:block;width:100%;height:100%;object-fit:cover}
.frente-fornecimento figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--tinta-70)}
.frente-fornecimento .editorial-kicker{color:var(--petroleo)}
.frente-fornecimento h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--petroleo)}
.frente-fornecimento__texto>p:not(.editorial-kicker){margin:20px 0 0;max-width:46ch;font-size:16px;line-height:1.7;color:var(--tinta-70)}

/* ================= ARLA: produto em tipografia ================= */
.frente-produto{background:var(--ur-percurso-alt,#E9EEF0);color:var(--petroleo);padding:clamp(64px,7vw,104px) 0}
.frente-produto__grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:start}
.frente-produto__cabeca{grid-column:1;grid-row:1}
.frente-produto .editorial-kicker{color:var(--petroleo)}
.frente-produto h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--petroleo)}
.frente-produto__cabeca>p:not(.editorial-kicker){margin:20px 0 0;font-size:16px;line-height:1.7;color:var(--tinta-70)}
.frente-produto__dado{display:flex;align-items:baseline;gap:14px;margin:28px 0 0;padding-top:20px;border-top:1px solid rgba(25,64,91,.2)}
.frente-produto__dado strong{font-size:32px;font-weight:500;letter-spacing:-.03em;color:var(--petroleo)}
.frente-produto__dado strong span{font-size:20px}
.frente-produto__dado span:last-child{font-size:16px;color:var(--tinta-70)}
.frente-produto__pontos{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;display:grid;gap:32px}
.frente-produto__pontos li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px}
.frente-produto__pontos li>span{grid-column:1;grid-row:1;font-size:16px;font-weight:600;color:var(--petroleo)}
.frente-produto__pontos h3{grid-column:2;grid-row:1;margin:0;font-size:clamp(24px,2.2vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--petroleo)}
.frente-produto__pontos p{grid-column:2;grid-row:2;margin:10px 0 0;font-size:16px;line-height:1.65;color:var(--tinta-70)}
.frente-produto__secundario{grid-column:1/-1;grid-row:2;margin:0;padding-top:24px;border-top:1px solid rgba(25,64,91,.2);font-size:16px;line-height:1.65;color:var(--petroleo)}
.frente-produto__secundario a{color:var(--petroleo);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--verde)}
.frente-produto__secundario a:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ================= Bioatlas: logística em petróleo escuro ================= */
.frente-logistica{background:var(--fr-fundo);color:var(--mineral);padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px)}
.frente-logistica__grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:end}
.frente-logistica__figura{margin:0}
.frente-logistica__moldura{overflow:hidden;aspect-ratio:4/3;background:var(--fr-moldura)}
.frente-logistica__moldura picture{display:block;height:100%}
.frente-logistica__moldura img{display:block;width:100%;height:100%;object-fit:cover}
.frente-logistica figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--fr-texto-claro)}
.frente-logistica .editorial-kicker{color:var(--verde)}
.frente-logistica h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--mineral)}
.frente-logistica__texto>p:not(.editorial-kicker){margin:20px 0 0;max-width:46ch;font-size:16px;line-height:1.7;color:var(--fr-texto-claro)}

.frente-etapas{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.frente-etapas__etapa{position:relative;min-width:0}
.frente-etapas__marca{position:absolute;top:0;left:0;z-index:1;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--mineral);border-radius:50%;background:var(--verde)}
.frente-etapas__etapa h3{margin:40px 0 0;font-size:clamp(24px,2.2vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--mineral)}
.frente-etapas__etapa p{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--fr-texto-claro)}
.frente-etapas__ligacao{position:absolute;overflow:visible;pointer-events:none}
.frente-etapas__ligacao path{fill:none;stroke:var(--mineral);stroke-width:2}
.frente-etapas__ligacao--h{top:5px;left:7px;width:calc(100% + 32px);height:4px}
.frente-etapas__ligacao--v{display:none}

/* Guia de consulta da Bioatlas: neutro, sem petróleo, para separar da logística. */
.frentes-fotografia.solucao-bioatlas .solucao-guia{background:var(--mineral);color:var(--petroleo)}

/* ================= Home: três frentes em painéis visíveis ================= */
.home-fotografia__frentes{background:var(--fr-fundo);color:var(--mineral);padding:clamp(64px,7vw,104px) 0;scroll-margin-top:calc(var(--altura-cabecalho, 76px) + 16px)}
.home-fotografia__cabeca{max-width:760px}
.home-fotografia__cabeca .editorial-kicker{color:var(--verde)}
.home-fotografia__cabeca h2{margin:16px 0 0;font-size:clamp(36px,4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.045em;color:var(--mineral)}
.home-fotografia__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.home-frente{min-width:0}
.home-frente__figura{margin:0}
.home-frente__moldura{overflow:hidden;aspect-ratio:4/3;background:var(--fr-moldura)}
.home-frente__moldura picture{display:block;height:100%}
.home-frente__moldura img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.home-frente:hover .home-frente__moldura img{transform:scale(1.03)}
.home-frente:focus-within .home-frente__moldura img{transform:scale(1.03)}
.home-frente__figura figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:var(--fr-texto-claro)}
.home-frente__texto{margin-top:24px}
.home-frente .editorial-kicker{color:var(--verde)}
.home-frente h3{margin:12px 0 0;font-size:clamp(28px,2.6vw,36px);font-weight:400;line-height:1.14;letter-spacing:-.035em}
.home-frente h3 a{color:var(--mineral);text-decoration:none}
.home-frente h3 a:hover,
.home-frente h3 a:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--verde)}
.home-frente__texto>p:not(.editorial-kicker){margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--fr-texto-claro)}
.home-frente__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.home-frente__conhecer{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--mineral);text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--verde)}
.home-frente__cotacao{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:999px;background:var(--mineral);color:var(--fr-fundo);font-size:16px;font-weight:600;text-decoration:none}
.home-frente__cotacao:hover{background:#FFFFFF}
.home-frente svg{width:18px;height:18px;flex-shrink:0}
.home-frente a:focus-visible{outline:2px solid var(--verde);outline-offset:4px}

/* A orientação separa a faixa de frentes da localização e do contato. */
.home-fotografia .home-confianca>section.home-confianca__pedido{background:#E9EEF0;border-top:1px solid rgba(25,64,91,.15)}
.home-fotografia .home-confianca__pedido .editorial-kicker,
.home-fotografia .home-confianca__pedido-cabeca h2,
.home-fotografia .home-confianca__passo h3,
.home-fotografia .home-confianca__passo-num{color:var(--petroleo)}
.home-fotografia .home-confianca__pedido-cabeca p,
.home-fotografia .home-confianca__passo p,
.home-fotografia .home-confianca__pedido-acoes p{color:#405B6D;font-size:16px}
.home-fotografia .home-confianca__passos,
.home-fotografia .home-confianca__passo{border-color:rgba(25,64,91,.2)}
.home-fotografia .home-confianca__pedido-acoes .editorial-button{background:var(--petroleo);color:#fff}
.home-fotografia .home-confianca__pedido-acoes .editorial-button:hover{background:#245675}
.home-fotografia .home-confianca__pedido-acoes .link-seta{color:var(--petroleo);border-color:var(--petroleo);font-size:16px}
.home-fotografia .home-confianca__pedido-acoes .link-seta:hover{background:var(--petroleo);color:#fff}
.home-fotografia .home-confianca__faq{border-top:1px solid rgba(25,64,91,.15)!important}
.home-fotografia .home-confianca__local-painel h2{font-size:clamp(32px,3.2vw,44px);line-height:1.12}
.home-fotografia .home-confianca__canais a,
.home-fotografia .home-confianca__canais li span:last-child{font-size:16px}
.home-fotografia .home-confianca__local-mapa{border-left:1px solid rgba(255,255,255,.16)}

/* ================= Responsivo ================= */
@media (max-width:860px){
  .frente-contexto__grade,
  .frente-fornecimento__grade,
  .frente-logistica__grade,
  .frente-produto__grade{grid-template-columns:1fr}
  .frente-produto__cabeca,
  .frente-produto__pontos,
  .frente-produto__secundario{grid-column:1;grid-row:auto}
  .home-fotografia__lista{grid-template-columns:1fr;gap:40px}
  .frente-etapas{grid-template-columns:1fr;gap:0}
  .frente-etapas__etapa{padding-left:44px;padding-bottom:36px}
  .frente-etapas__etapa h3{margin-top:0}
  .frente-etapas__ligacao--h{display:none}
  .frente-etapas__ligacao--v{display:block;top:14px;left:5px;width:4px;height:calc(100% - 14px)}
}
@media (max-width:760px){
  /* Celular: a galeria tem altura contida; a foto vem antes do texto do mesmo bloco. */
  .frente-galeria__quadro{aspect-ratio:16/10;max-height:300px}
}

/* ================= Movimento (só com JS e sem reduced-motion) ================= */
/* Conteúdo com entrada: fade e subida curta, uma vez, por elemento observado. */
.frentes-fotografia--anima .frente-revela:not(.is-visivel){opacity:0;transform:translateY(12px)}
.frentes-fotografia--anima .frente-revela.is-visivel{opacity:1;transform:none;transition:opacity 600ms ease calc(var(--i,0) * 120ms),transform 600ms cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 120ms)}

/* Máscara diagonal (ângulo da marca) nas fotos dos cartões: 600 ms, 120 ms entre cartões. */
.frentes-fotografia--anima .frente-revela:not(.is-visivel) .frente-mascara{clip-path:polygon(0 0,0 0,-12% 100%,-12% 100%)}
.frentes-fotografia--anima .frente-revela.is-visivel .frente-mascara{clip-path:polygon(0 0,100% 0,100% 100%,-12% 100%);transition:clip-path 600ms cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 120ms)}

/* Fio das etapas da Bioatlas: desenha quando a etapa entra. */
.frentes-fotografia--anima .frente-etapas__ligacao path{stroke-dasharray:1;stroke-dashoffset:1}
.frentes-fotografia--anima .frente-revela.is-visivel .frente-etapas__ligacao path{stroke-dashoffset:0;transition:stroke-dashoffset 600ms ease calc(var(--i,0) * 120ms + 250ms)}

/* Reduced-motion: estado final e estático, também se a preferência mudar durante a visita. */
@media (prefers-reduced-motion: reduce){
  .frentes-fotografia *,
  .frentes-fotografia *::before,
  .frentes-fotografia *::after{transition:none!important;animation:none!important}
  .frentes-fotografia .frente-revela,
  .frentes-fotografia .frente-mascara{opacity:1!important;transform:none!important;clip-path:none!important}
  .frentes-fotografia .frente-etapas__ligacao path{stroke-dashoffset:0!important;stroke-dasharray:none!important}
}