/* A scoped sample library within the homepage's existing industrial palette. */
#materiais.materials-section { position: relative; width: 100%; padding: 5rem 3rem 4rem; background: #fff; border-top: 1px solid rgb(0 93 169 / 12%); color: #005da9; }
.materials-heading, .materials-catalogue { max-width: 90rem; margin-inline: auto; }
.materials-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 2rem; }
#materials-title { font-size: clamp(2.75rem,4.5vw,4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
#materials-title span { color: #80641c; }
.materials-heading > p { max-width: 24rem; color: #365e80; font-size: .875rem; line-height: 1.7; }
.materials-navigation[hidden], .material-panel[hidden], .material-image-error[hidden], .material-figure > img[hidden] { display: none; }
.materials-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 1rem; margin-bottom: .75rem; }
.materials-toolbar > p { font-size: .875rem; color: #365e80; }
.materials-paging { display: flex; align-items: center; gap: .5rem; }
.materials-count { font-family: 'Space Mono',monospace; font-size: .75rem; font-variant-numeric: tabular-nums; color: #365e80; margin-right: .5rem; }
.material-step { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(0 93 169 / 24%); border-radius: 2px; color: #003b6d; transition: background-color 180ms; }
.material-step:hover:not(:disabled) { background: #f5f7fa; }
.material-step:disabled { color: #75899a; border-color: #d6dfe7; cursor: default; }
.material-step-prev svg { transform: rotate(180deg); }
.materials-choices { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 1rem; padding: 7px 7px 1.25rem; margin-inline: -7px; }
.material-choice { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0 0 .875rem; border-bottom: 1px solid #cfdae3; color: #365e80; text-align: left; transition: color 180ms,border-color 180ms; }
.material-choice img { width: 100%; height: 6rem; aspect-ratio: 4 / 3; object-fit: contain; background: #f5f7fa; }
.material-choice > span { padding: .75rem .875rem 0 0; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.material-choice:focus-visible { outline-offset: 4px; }
.material-choice:hover { color: #003b6d; border-color: #005da9; }
.material-choice[aria-pressed="true"] { color: #003b6d; border-color: #80641c; }
.material-choice[aria-pressed="true"] > span { font-weight: 700; }
.material-choice[aria-pressed="true"]::after { content: ''; position: absolute; right: 0; bottom: .95rem; width: 6px; height: 6px; background: #80641c; }
.materials-panels { margin-top: .5rem; }
.material-panel { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); border-block: 1px solid #cfdae3; }
.material-panel + .material-panel { margin-top: 2rem; }
.materials-enhanced .material-panel { margin-top: 0; }
.material-figure { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: 1.5rem 1.5rem 1rem; background: #f5f7fa; }
.material-figure > img { width: 100%; height: auto; max-height: 24rem; aspect-ratio: 4 / 3; object-fit: contain; }
.material-figure figcaption { margin-top: .5rem; color: #365e80; font-size: .6875rem; line-height: 1.5; }
.material-image-error { max-width: 30ch; margin-block: auto; padding: 2rem 0; font-size: .875rem; color: #365e80; line-height: 1.7; }
.material-image-retry { display: block; min-height: 44px; margin-top: .5rem; color: #003b6d; text-align: left; text-decoration: underline; text-decoration-color: #a48832; }
.material-image-retry:hover { color: #005da9; }
.material-figure[data-image-state="error"] { min-height: 20rem; }
.material-figure[data-image-state="error"] figcaption { order: 1; }
.material-details { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; min-width: 0; padding: clamp(2rem,3.3vw,3rem); }
.material-details h3 { font-size: clamp(2rem,3.3vw,3.25rem); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.material-category { margin-top: .75rem; font-size: .875rem; color: #80641c; }
.material-application { width: 100%; border-top: 1px solid #cfdae3; padding-top: 1.25rem; }
.material-application dt { font-size: .75rem; color: #365e80; margin-bottom: .5rem; }
.material-application dd { color: #003b6d; font-size: 1.125rem; line-height: 1.5; }
.material-action { width: 100%; }
.material-quote { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; width: 100%; padding: 1rem 1.25rem; border-radius: 2px; background: #003b6d; color: white; font-size: .875rem; font-weight: 600; transition: background-color 180ms; }
.material-quote svg { flex-shrink: 0; }
.material-quote:hover { background: #005da9; }
.material-action > p { margin-top: .75rem; color: #365e80; font-size: .75rem; }
.materials-guidance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; font-size: .875rem; color: #365e80; }
.materials-guidance a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; color: #003b6d; text-decoration: underline; text-decoration-color: #a48832; }
.materials-guidance svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .materials-enhanced .material-panel:not([hidden]) .material-figure > img { animation: material-reveal 320ms cubic-bezier(.16,1,.3,1); }
  @keyframes material-reveal { from { clip-path: inset(1.5% 0); opacity: .88; } to { clip-path: inset(0); opacity: 1; } }
}
@media (max-width: 63.999rem) {
  #materiais.materials-section { padding-inline: 2rem; }
  .materials-heading { gap: 2rem; }
  .materials-heading > p { max-width: 20rem; }
  .material-choice img { height: 5.5rem; }
  .materials-choices { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: #a48832 #f5f7fa; scrollbar-width: thin; }
  .material-choice { flex: 0 0 8.5rem; scroll-snap-align: start; }
  .material-details { padding: 2rem; gap: 1.75rem; }
  .material-figure { padding: 1rem; }
}
@media (max-width: 47.999rem) {
  #materiais.materials-section { padding: 3rem 1.5rem; }
  .materials-heading { display: block; margin-bottom: 1.5rem; }
  #materials-title { max-width: 10ch; font-size: 2.75rem; }
  .materials-heading > p { max-width: 36ch; margin-top: 1rem; }
  .materials-toolbar { gap: .5rem; margin-bottom: .5rem; }
  .materials-toolbar > p { font-size: .8125rem; }
  .materials-paging { gap: .375rem; }
  .materials-count { margin-right: .125rem; font-size: .6875rem; white-space: nowrap; }
  .materials-choices { gap: .75rem; padding-bottom: 1.25rem; }
  .material-choice { flex-basis: 7.5rem; }
  .material-choice img { height: 4.5rem; }
  .material-choice > span { font-size: .8125rem; }
  .material-panel { grid-template-columns: minmax(0,1fr); }
  .material-figure { padding: .75rem .75rem .875rem; }
  .material-details { padding: 1.5rem 0 1.75rem; gap: 1.25rem; }
  .material-figure[data-image-state="error"] { min-height: 16rem; }
  .material-details h3 { font-size: 2.25rem; }
  .material-category { margin-top: .5rem; }
  .material-application { padding-top: 1rem; }
  .material-application dd { font-size: 1rem; }
  .materials-guidance { display: block; padding-top: 1.25rem; }
  .materials-guidance a { margin-top: .25rem; }
}