/* Relação de produtos: 8 .esp-cat (base.css) numa única linha → itens menores p/ caber no container atual.
   Sobe p/ sobrepor a cauda da wave da faixa (z-index acima do azul). */
.portfolio-cats { position: relative; z-index: 3; margin-top: -7rem; padding-bottom: var(--esp-sec-y);
  --esp-cat-hover-sh: var(--esp-sh-cat-hover); }   /* hover suave (fundo branco), igual negocio */
.portfolio-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1.25rem; }
.portfolio-cats .esp-cat__img { position: relative; width: 100%; height: auto; aspect-ratio: 1; }
.portfolio-cats .esp-cat__link { gap: 0.875rem; }
.portfolio-cats .esp-cat__label { width: auto; font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-body); }
.portfolio-cats .esp-cat.is-active .esp-cat__label { font-weight: 700; color: var(--esp-cyan); }
/* formas: 5-8 = espelho dos 4 primeiros (linha simétrica). base dá 5-8 = shape-3·4·1·2; corrige p/ 1·2·3·4 */
.portfolio-cats .esp-cat:nth-child(5) .esp-cat__img { border-radius: var(--esp-shape-1); }
.portfolio-cats .esp-cat:nth-child(6) .esp-cat__img { border-radius: var(--esp-shape-2); }
.portfolio-cats .esp-cat:nth-child(7) .esp-cat__img { border-radius: var(--esp-shape-3); }
.portfolio-cats .esp-cat:nth-child(8) .esp-cat__img { border-radius: var(--esp-shape-4); }
.portfolio-cats .esp-cat:not(.is-active) .esp-cat__img::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--esp-blue); opacity: 0.4; transition: opacity .3s ease; }
.portfolio-cats .esp-cat:not(.is-active):hover .esp-cat__img::after { opacity: 0; }
/* ≤980: seletor vira faixa horizontal rolável (as 8 colunas quebravam rótulos no meio da palavra).
   full-bleed = rola até a borda (o próximo item espia); o fade nas bordas (has-l/has-r via portfolio.js)
   acompanha a rolagem p/ sinalizar "tem mais" sem apagar o 1º/último item. */
@media (max-width: 980px) {
  .portfolio-cats__grid { display: flex; gap: 1rem; overflow-x: auto;
    margin-inline: calc(-1 * var(--esp-gutter)); padding-inline: var(--esp-gutter); scrollbar-width: none; }
  .portfolio-cats__grid::-webkit-scrollbar { display: none; }
  .portfolio-cats .esp-cat { flex: 0 0 auto; width: 6.5rem; }
  .portfolio-cats__grid.has-r { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
  .portfolio-cats__grid.has-l:not(.has-r) { -webkit-mask-image: linear-gradient(to right, transparent, #000 20%); mask-image: linear-gradient(to right, transparent, #000 20%); }
  .portfolio-cats__grid.has-l.has-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }
}
/* tablet: sem o -7rem inteiro (o texto da intro não tem essa folga; encavalava no carrossel);
   item mais largo que no mobile p/ "Diciclopentadieno" não quebrar no meio */
@media (min-width: 769px) and (max-width: 980px) {
  .portfolio-cats { margin-top: -3rem; }
  .portfolio-cats .esp-cat { width: 8rem; }
}

.portfolio-detail { padding-bottom: var(--esp-sec-y); }
.portfolio-panel { padding: 3rem; background: var(--esp-bg-soft); border-radius: var(--esp-radius-xl) var(--esp-radius-2xl) var(--esp-radius-xl) var(--esp-radius-2xl); }
.portfolio-panel[hidden] { display: none; }
.portfolio-panel__grid { display: grid; grid-template-columns: minmax(0, 17.25rem) minmax(0, 1fr); gap: 2.75rem; align-items: start; }
.portfolio-panel__media { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
/* mesmo tamanho e shape da foto do box intro (.esp-hero-band__card) */
.portfolio-panel__photo { width: 100%; height: auto; display: block; border-radius: var(--esp-shape-card); }
.portfolio-panel__logo { max-width: 11rem; height: auto; }
.portfolio-panel__title { margin: 1rem 0 0; font: 700 var(--fs-h2)/1.2 var(--esp-font); color: var(--esp-gray); }
.portfolio-panel__desc { margin: 1.25rem 0 0; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.portfolio-panel__desc strong { color: var(--esp-gray); }
.portfolio-panel__cta { margin-top: 1.75rem; }

.portfolio-catalogs { margin-top: 2.5rem; }
.portfolio-catalogs__title { margin: 0 0 1.5rem; font: 700 var(--fs-h3)/1.2 var(--esp-font); color: var(--esp-gray); }
.portfolio-catalogs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.portfolio-catalog { display: flex; align-items: center; gap: 1.25rem; }
.portfolio-catalog__thumb { position: relative; flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: var(--esp-shape-1); overflow: hidden; }
.portfolio-catalog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* repouso = foto limpa; overlay + ícone de download aparecem no hover/foco do item inteiro.
   Touch (hover:none) mantém overlay+ícone estáticos — sem hover não haveria pista de download. */
.portfolio-catalog__thumb::before { content: ""; position: absolute; inset: 0; background: var(--esp-blue); opacity: 0; transition: opacity .25s ease; }
.portfolio-catalog__thumb::after { content: ""; position: absolute; inset: 0; background: url(../assets/icon-download.svg) center / 2.5rem no-repeat;
  opacity: 0; transform: scale(.82); transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.portfolio-catalog:hover .portfolio-catalog__thumb::before,
.portfolio-catalog:focus-visible .portfolio-catalog__thumb::before { opacity: 0.4; }
.portfolio-catalog:hover .portfolio-catalog__thumb::after,
.portfolio-catalog:focus-visible .portfolio-catalog__thumb::after { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .portfolio-catalog__thumb::before { opacity: 0.4; }
  .portfolio-catalog__thumb::after { opacity: 1; transform: scale(1); }
}
.portfolio-catalog__label { font: 400 var(--fs-body)/1.2 var(--esp-font); color: var(--esp-body); }
.portfolio-catalog:hover .portfolio-catalog__label,
.portfolio-catalog:focus-visible .portfolio-catalog__label { font-weight: 700; }

/* vídeo: mesmo elemento/tamanho da Sustentabilidade (44rem, 16/9) */
.portfolio-panel__video { max-width: 44rem; margin: 2.5rem auto 0; aspect-ratio: 16 / 9; border-radius: var(--esp-radius-xl); overflow: hidden; position: relative; }

@media (max-width: 900px) {
  .portfolio-panel { padding: 2rem; }
  .portfolio-catalogs__grid { grid-template-columns: 1fr; }
}
/* só no mobile a foto empilha (no tablet as 2 colunas seguram o tamanho da foto) */
@media (max-width: 768px) {
  .portfolio-panel__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Busca de Produtos: estrutura mock; o conteúdo real vem do módulo de busca do CMS */
.portfolio-search { padding-bottom: var(--esp-sec-y); }
.portfolio-search__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: 1.75rem; }
.portfolio-search__field { display: flex; flex-direction: column; gap: 0.75rem; }
.portfolio-search__label { font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-muted); }
.portfolio-search__control { position: relative; }
.portfolio-search__input { width: 100%; border: 0; border-bottom: 0.0625rem solid var(--esp-border); background: transparent;
  padding: 0.5rem 2rem 0.5rem 0; font: 700 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-blue); }
.portfolio-search__input::placeholder { color: var(--esp-muted); font-weight: 400; }
.portfolio-search__input:focus { outline: none; border-bottom-color: var(--esp-cyan); }
.portfolio-search .esp-select__toggle { border-bottom: 0.0625rem solid var(--esp-border); padding: 0.5rem 0.25rem 0.5rem 0; font: 700 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-blue); }
.portfolio-search .esp-select.is-open .esp-select__toggle,
.portfolio-search .esp-select__toggle:focus-visible { border-bottom-color: var(--esp-cyan); outline: none; }
.portfolio-search__ico, .portfolio-search__btn-ico {
  -webkit-mask: url(../assets/icon-busca.svg) center/contain no-repeat; mask: url(../assets/icon-busca.svg) center/contain no-repeat; }
.portfolio-search__ico { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem;
  background: var(--esp-gray); pointer-events: none; }
.portfolio-search__btn-ico { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; background: #fff; }
.portfolio-search__clear { display: inline-block; margin-top: 1.25rem; font: 400 var(--fs-sm)/1.2 var(--esp-font); color: var(--esp-gray); text-decoration: underline; }
.portfolio-search__clear:hover { color: var(--esp-blue); }
.portfolio-search__hint { margin: 3rem 0 1.5rem; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-muted); }

.portfolio-results { display: flex; flex-direction: column; gap: 1.5rem; }
.portfolio-group { border-radius: var(--esp-radius-md); overflow: hidden; box-shadow: var(--esp-sh-card); }
.portfolio-group[hidden] { display: none; }
.portfolio-group__heading { margin: 0; }
.portfolio-group__head { width: 100%; display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 2rem;
  background: var(--esp-blue); border: 0; cursor: pointer; text-align: left; color: #fff; }   /* blue (não cyan): AA 5.5:1 c/ branco */
.portfolio-group__name { font: 700 var(--fs-lead)/1.2 var(--esp-font); }
.portfolio-group__count { margin-left: auto; font: 400 var(--fs-body)/1 var(--esp-font); white-space: nowrap; }
.portfolio-group__count b { font-weight: 700; }
/* chevron: aponta p/ baixo (fechado) → cima (aberto) */
.portfolio-group__chevron { flex: 0 0 auto; width: 0.85rem; height: 0.85rem;
  border-right: 0.1875rem solid var(--esp-yellow); border-bottom: 0.1875rem solid var(--esp-yellow);
  transform: translateY(-0.2rem) rotate(45deg); transition: transform .3s ease; }
.portfolio-group.is-open .portfolio-group__chevron { transform: translateY(0.15rem) rotate(-135deg); }
/* max-height é teto-mole (> a maior tabela); overflow clipa no colapso */
.portfolio-group__panel { overflow: hidden; max-height: 0; transition: max-height .45s ease; }
.portfolio-group.is-open .portfolio-group__panel { max-height: 200rem; }
.portfolio-group__scroll { overflow-x: auto; }

.portfolio-table { width: 100%; min-width: 48rem; border-collapse: collapse; background: var(--esp-bg); }
.portfolio-table th { padding: 0.875rem 1.25rem; background: var(--esp-gray); color: #fff; font: 600 var(--fs-sm)/1.2 var(--esp-font); text-align: left; white-space: nowrap; vertical-align: top; }
.portfolio-table__unit { display: block; margin-top: 0.25rem; font-weight: 400; color: rgba(255, 255, 255, .75); }   /* .75 = AA 5.2:1 sobre --esp-gray */
.portfolio-table td { padding: 1.25rem; border-bottom: 0.0625rem solid var(--esp-border); font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); vertical-align: middle; }
.portfolio-table tbody tr:last-child td { border-bottom: 0; }
.portfolio-table__prod { font: 700 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-blue); white-space: nowrap; }
.portfolio-table__logo { display: block; width: 4rem; height: auto; margin-top: 0.5rem; }
/* colunas ordenáveis (setas injetadas pelo mock; inerte sem ele) */
.portfolio-table--sortable th { cursor: pointer; }
.portfolio-table--sortable th:focus-visible { outline: 0.125rem solid var(--esp-cyan); outline-offset: -0.125rem; }
.portfolio-table__sort { display: inline-block; position: relative; width: 0.5rem; height: 0.75rem; margin-left: 0.375rem; vertical-align: middle; }
.portfolio-table__sort::before, .portfolio-table__sort::after { content: ""; position: absolute; left: 0; border-left: 0.25rem solid transparent; border-right: 0.25rem solid transparent; opacity: 0.35; }
.portfolio-table__sort::before { top: 0; border-bottom: 0.3125rem solid currentColor; }
.portfolio-table__sort::after { bottom: 0; border-top: 0.3125rem solid currentColor; }
.portfolio-table th[aria-sort="ascending"] .portfolio-table__sort::before { opacity: 1; }
.portfolio-table th[aria-sort="descending"] .portfolio-table__sort::after { opacity: 1; }
/* mobile: alarga a coluna Aplicação (última) p/ o texto quebrar menos e as linhas não ficarem tão altas */
@media (max-width: 768px) { .portfolio-table th:last-child, .portfolio-table td:last-child { min-width: 18rem; } }

@media (max-width: 768px) {
  .portfolio-search__form { grid-template-columns: 1fr; gap: 1.5rem; }
  .portfolio-search__submit { justify-self: start; }
}