/* ==========================================================================
   Section: Aplicações
   Explorador de segmentos: trilho vertical grudado à esquerda (desktop) e
   painéis permanentemente visíveis à direita. Mesma gramática do restante do
   site — filete de 1px como estrutura, nenhum card, nenhuma sombra em
   elemento de fluxo, nenhum gradiente decorativo.

   Diferença deliberada em relação à seção Produtos: lá o trilho FILTRA e
   oculta grupos; aqui ele apenas ACOMPANHA a leitura. Nada é escondido.
   ========================================================================== */

.aplicacoes {
  /* Um passo abaixo do branco: alterna com o --surface da seção Produtos */
  background-color: var(--surface-alt);
}

/* --------------------------------------------------------------------------
   Bloco 1 — Cabeçalho editorial
   Mesmo grid das seções Empresa e Produtos: metadados + texto.
   -------------------------------------------------------------------------- */

.aplicacoes__cabecalho {
  display: grid;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--ink);
}

.aplicacoes__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.aplicacoes__indice {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Contagens derivadas — entram só no desktop, para não competir com o
   título no celular. */
.aplicacoes__contagens {
  display: none;
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

.aplicacoes__contagem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.aplicacoes__contagem dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.aplicacoes__contagem dd {
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}

.aplicacoes__titulo {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}

.aplicacoes__titulo em {
  font-style: normal;
  color: var(--green-700);
}

.aplicacoes__lead {
  margin-top: var(--sp-6);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Bloco 2 — Explorador
   -------------------------------------------------------------------------- */

.aplicacoes__explorador {
  display: grid;
  /* minmax(0, 1fr): trava o mínimo em zero. Sem isto os rótulos longos dos
     chips e do CTA (.btn é white-space: nowrap) definiriam o min-content da
     coluna e estourariam o container em 320 px. */
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-14);
}

/* --- Trilho lateral ---
   Ausente no celular de propósito: um trilho horizontal repetiria a barra de
   filtro da seção Produtos. Empilhado, cada segmento é lido inteiro. */

.aplicacoes__trilho {
  display: none;
}

.aplicacoes__trilho-titulo {
  padding-bottom: var(--sp-4);
  color: var(--ink-3);
}

.aplicacoes__trilho-corpo {
  position: relative;
  border-left: 1px solid var(--line);
}

/* Marcador que desliza entre os itens — posicionado por JS.
   Sem JS ele fica com altura zero e o item ativo usa o próprio filete. */
.aplicacoes__trilho-marca {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: var(--trilho-h, 0px);
  background-color: var(--green-600);
  transform: translate3d(0, var(--trilho-y, 0px), 0);
  transition: transform var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* Antes da primeira medição não há transição: o marcador não "escorrega"
   do topo até o item ativo na carga da página. */
.aplicacoes__trilho-marca:not(.is-medido) {
  transition: none;
}

.aplicacoes__trilho-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  color: var(--ink-3);
  transition: color var(--dur-base) var(--ease-out);
}

.aplicacoes__trilho-item:hover {
  color: var(--brand-navy);
}

.aplicacoes__trilho-item.is-ativo {
  color: var(--brand-navy);
}

/* Sem JS o marcador não existe: o item ativo precisa do próprio filete */
.aplicacoes__trilho-item.is-ativo:not(.js-ativo)::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--green-600);
}

.aplicacoes__trilho-num {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-out);
}

.aplicacoes__trilho-item.is-ativo .aplicacoes__trilho-num {
  color: var(--green-600);
}

.aplicacoes__trilho-nome {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Painel de segmento
   -------------------------------------------------------------------------- */

.aplicacao {
  padding-top: var(--sp-8);
  /* Filete cheio: abre cada segmento com o mesmo peso dos demais blocos */
  border-top: 1px solid var(--ink);
}

.aplicacao + .aplicacao {
  margin-top: var(--sp-16);
}

.aplicacao__num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--green-600);
  font-variant-numeric: tabular-nums;
}

.aplicacao__titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.aplicacao__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--brand-navy);
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.aplicacao:hover .aplicacao__icone {
  color: var(--green-600);
  border-color: var(--green-200);
}

.aplicacao__icone .icone {
  width: 20px;
  height: 20px;
}

.aplicacao__chamada {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Corpo: descrição + usos + figura --- */

.aplicacao__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-7);
}

.aplicacao__coluna {
  min-width: 0;
}

.aplicacao__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 58ch;
}

.aplicacao__bloco {
  margin-top: var(--sp-7);
}

.aplicacao__rotulo {
  margin-bottom: var(--sp-3);
  color: var(--ink-3);
}

/* Lista de rotinas: filete entre itens, no idioma de tabela técnica do site */
.aplicacao__usos {
  border-top: 1px solid var(--line);
}

.aplicacao__uso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-2);
}

.aplicacao__uso-marca {
  width: 5px;
  height: 5px;
  flex: none;
  /* translateY alinha o ponto à altura-x da primeira linha do texto */
  transform: translateY(-2px);
  border-radius: 50%;
  background-color: var(--green-600);
}

/* Painel de foto. Arquivo ausente: o JS marca o corpo e o painel some por
   completo — nunca fica uma caixa cinza no lugar. */
.aplicacao__figura {
  overflow: hidden;
  border-radius: var(--r-2xl);
  aspect-ratio: 4 / 3;
  background-color: var(--fog);
}

.aplicacao__figura picture {
  display: block;
  width: 100%;
  height: 100%;
}

.aplicacao__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.aplicacao__corpo.is-sem-figura .aplicacao__figura {
  display: none;
}

/* --- Rodapé: chips das linhas + CTA --- */

.aplicacao__rodape {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.aplicacao__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.aplicacao__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4375rem var(--sp-4) 0.4375rem var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  transition: border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.aplicacao__chip .icone {
  width: 15px;
  height: 15px;
  color: var(--green-600);
  transition: color var(--dur-base) var(--ease-out);
}

.aplicacao__chip:hover {
  border-color: var(--brand-navy);
  background-color: var(--brand-navy);
  color: var(--ink-inverse);
}

.aplicacao__chip:hover .icone {
  color: var(--green-400);
}

.aplicacao__cta {
  justify-self: start;
}

/* --------------------------------------------------------------------------
   Bloco 3 — Nota de cobertura regional
   -------------------------------------------------------------------------- */

.aplicacoes__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  max-width: 72ch;
}

.aplicacoes__nota .icone {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--green-600);
}

/* --------------------------------------------------------------------------
   Bloco 4 — Fluxo de atendimento
   -------------------------------------------------------------------------- */

.aplicacoes__fluxo {
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--ink);
}

.aplicacoes__fluxo-titulo {
  margin-top: var(--sp-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-regular);
  color: var(--ink);
  max-width: 34ch;
  text-wrap: pretty;
}

.aplicacoes__passos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-10);
  border-top: 1px solid var(--line-strong);
}

.aplicacoes__passo {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.aplicacoes__passo-num {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--green-600);
  font-variant-numeric: tabular-nums;
}

.aplicacoes__passo-titulo {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  color: var(--ink);
}

.aplicacoes__passo-desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  max-width: 46ch;
}

.aplicacoes__fluxo-cta {
  margin-top: var(--sp-8);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Mobile estreito: alvos de toque cheios e nada espremido.
   O rótulo pode quebrar linha — em 320 px ele não cabe em uma só. */
@media (max-width: 599px) {
  .aplicacao__cta,
  .aplicacoes__fluxo-cta {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .aplicacao__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--sp-8);
    align-items: start;
  }

  .aplicacao__corpo.is-sem-figura {
    grid-template-columns: minmax(0, 1fr);
  }

  .aplicacao__rodape {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
  }

  .aplicacoes__passos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aplicacoes__passo {
    padding-inline: var(--sp-5);
    border-left: 1px solid var(--line);
  }

  .aplicacoes__passo:first-child {
    border-left: none;
    padding-left: 0;
  }
}

/* Desktop — o trilho e a coluna de metadados entram em cena */
@media (min-width: 1024px) {
  .aplicacoes__cabecalho {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--sp-16);
  }

  .aplicacoes__contagens {
    display: block;
  }

  .aplicacoes__explorador {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: start;
  }

  .aplicacoes__trilho {
    display: block;
    position: sticky;
    /* Abaixo do header fixo, com o mesmo respiro do restante da seção */
    top: calc(var(--header-h) + var(--sp-8));
  }

  .aplicacao__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  }

  /* O fluxo vira duas colunas: título + CTA à esquerda, passos à direita —
     o mesmo par "metadados / conteúdo" que abre todas as seções do site. */
  .aplicacoes__fluxo {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    /* A régua de passos ocupa as duas linhas. Sem o 1fr na segunda, a folga
       que ela exige seria distribuída entre as duas e abriria um vão morto
       entre o título e o CTA. Aqui toda a sobra cai na linha do CTA. */
    grid-template-rows: auto minmax(0, 1fr);
    /* Só o vão entre colunas: o respiro vertical até o CTA é o margin-top
       dele. Um row-gap aqui somaria aos dois e abriria um vão morto. */
    gap: 0 var(--sp-16);
    align-items: start;
  }

  .aplicacoes__fluxo-cabecalho {
    grid-column: 1;
    grid-row: 1;
  }

  .aplicacoes__fluxo-cta {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: var(--sp-8);
  }

  .aplicacoes__passos {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* Large — o trilho e a figura respiram mais */
@media (min-width: 1440px) {
  .aplicacoes__explorador {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--sp-16);
  }

  .aplicacao__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--sp-10);
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aplicacoes__trilho-marca {
    transition: none;
  }
}