/* Catálogo de produtos — componentes específicos da subpágina */

.catalog-hero { position: relative; min-height: 430px; overflow: hidden; background: var(--color-dark); color: var(--color-white); }
.catalog-hero__image, .catalog-hero__overlay { position: absolute; inset: 0; }
.catalog-hero__image { background: url("../img/hero-industrial.webp") center 53% / cover no-repeat; }
.catalog-hero__overlay { background: linear-gradient(90deg, rgba(3, 19, 38, .98) 0%, rgba(3, 19, 38, .9) 38%, rgba(3, 19, 38, .2) 100%); }
.catalog-hero__content { position: relative; z-index: 1; padding-top: 3rem; padding-bottom: 4.8rem; }
.catalog-breadcrumb { display: flex; align-items: center; gap: .55rem; margin-bottom: 3.5rem; color: rgba(255, 255, 255, .76); font-size: .75rem; }
.catalog-breadcrumb a:hover { color: var(--color-primary-bright); }
.catalog-breadcrumb i { font-size: .58rem; }
.catalog-hero h1 { max-width: 620px; margin: 0 0 1.25rem; font-size: clamp(3rem, 6vw, 5.2rem); line-height: .92; letter-spacing: -.04em; }
.catalog-hero h1 span { color: var(--color-primary-bright); }
.catalog-hero__content > p:not(.eyebrow):not(.catalog-breadcrumb) { max-width: 490px; margin-bottom: 1.7rem; font-size: .95rem; }

.catalog-intro { padding: 4rem 0 3.25rem; }
.catalog-intro__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; }
.catalog-intro h2 { margin-bottom: .9rem; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: .96; }
.catalog-intro p:not(.eyebrow) { max-width: 520px; margin-bottom: 0; color: #455465; font-size: .94rem; }
.catalog-category-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.catalog-category-nav a { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem .9rem; border: 1px solid var(--color-primary); color: var(--color-primary); font: 700 .78rem/1 var(--font-display); text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }
.catalog-category-nav a:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); }
.catalog-category-nav i { font-size: .9rem; }

.catalog-group { padding: 4.8rem 0 5.25rem; }
.catalog-group--dark { background: var(--color-dark); color: var(--color-white); }
.catalog-group--light { background: var(--color-light); color: var(--color-dark); }
.catalog-group__header { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; margin-bottom: 2rem; }
.catalog-group__header h2 { margin-bottom: 0; font-size: clamp(2.15rem, 4vw, 3.3rem); line-height: .95; letter-spacing: -.04em; }
.catalog-group__header > p { max-width: 450px; margin: 0 0 .2rem; color: rgba(255, 255, 255, .76); font-size: .92rem; }
.catalog-group--light .catalog-group__header > p { color: #536071; }
.product-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.product-catalog-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--color-white); color: var(--color-dark); box-shadow: 0 9px 24px rgba(3, 19, 38, .11); transition: transform .25s ease, box-shadow .25s ease; }
.product-catalog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(3, 19, 38, .2); }
.product-image-trigger { position: relative; display: flex; width: 100%; height: 205px; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; overflow: hidden; background: #eef1f3; cursor: zoom-in; }
.product-image-trigger:focus-visible { outline: 3px solid var(--color-primary-bright); outline-offset: -3px; }
.product-image-trigger img { width: 100%; height: 100%; padding: .7rem; object-fit: contain; transition: transform .35s ease; }
.product-image-trigger:hover img { transform: scale(1.05); }
.product-image-trigger__icon { position: absolute; right: .7rem; bottom: .7rem; display: inline-flex; width: 31px; height: 31px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-white); font-size: .85rem; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.product-image-trigger:hover .product-image-trigger__icon, .product-image-trigger:focus-visible .product-image-trigger__icon { opacity: 1; transform: translateY(0); }
.product-catalog-card__body { display: flex; min-height: 112px; flex: 1; flex-direction: column; align-items: flex-start; padding: .8rem .9rem .85rem; }
.product-catalog-card__body > span { margin-bottom: .35rem; color: var(--color-primary); font: 700 .66rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.product-catalog-card h3 { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.05; }
.product-catalog-card a { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; color: var(--color-primary); font: 700 .68rem/1 var(--font-display); text-transform: uppercase; }
.product-catalog-card a:hover { color: var(--color-primary-bright); }
.product-catalog-card a i { font-size: .65rem; transition: transform .2s ease; }
.product-catalog-card a:hover i { transform: translateX(3px); }

/* Popup de detalhes */
body.modal-open { overflow: hidden; }
.product-modal[hidden] { display: none; }
.product-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.5rem; }
.product-modal__backdrop { position: absolute; inset: 0; background: rgba(1, 11, 23, .82); backdrop-filter: blur(3px); }
.product-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); width: min(980px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; background: var(--color-white); color: var(--color-dark); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.product-modal__close { position: absolute; z-index: 2; top: .9rem; right: .9rem; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--color-dark); color: var(--color-white); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.product-modal__close:hover { background: var(--color-primary); transform: rotate(90deg); }
.product-modal__close:focus-visible { outline: 3px solid var(--color-primary-bright); outline-offset: 3px; }
.product-modal__media { display: flex; min-height: 440px; align-items: center; justify-content: center; padding: 2rem; background: #eef1f3; }
.product-modal__media img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; }
.product-modal__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 3.4rem 2.3rem 2.3rem; }
.product-modal__content h2 { margin-bottom: .9rem; font-size: clamp(2rem, 4vw, 3rem); line-height: .95; }
.product-modal__content > p:not(.eyebrow):not(.product-modal__note) { margin-bottom: 1.25rem; color: #526172; font-size: .96rem; }
.product-modal__note { display: flex; gap: .55rem; margin-bottom: 1.5rem; color: var(--color-dark); font-size: .8rem; }
.product-modal__note i { color: var(--color-primary); }

.catalog-cta { position: relative; min-height: 248px; overflow: hidden; background: var(--color-dark); color: var(--color-white); }
.catalog-cta__image, .catalog-cta__overlay { position: absolute; inset: 0; }
.catalog-cta__image { background: url("../img/solda-industrial.webp") center / cover no-repeat; }
.catalog-cta__overlay { background: linear-gradient(90deg, rgba(3, 19, 38, 1) 0%, rgba(3, 19, 38, .91) 44%, rgba(3, 19, 38, .26) 100%); }
.catalog-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 248px; gap: 3rem; }
.catalog-cta h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: .95; }
.catalog-cta__inner > div:last-child { justify-self: center; }
.catalog-cta__inner > div:last-child p { margin-bottom: 1rem; font-size: .94rem; }

@media (max-width: 1060px) {
  .product-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .catalog-intro__layout, .catalog-group__header, .catalog-cta__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .catalog-category-nav { justify-content: flex-start; }
  .catalog-group__header { align-items: start; }
  .catalog-cta__inner { align-content: center; }
  .catalog-cta__inner > div:last-child { justify-self: start; }
}

@media (max-width: 560px) {
  .catalog-hero { min-height: 530px; }
  .catalog-hero__image { background-position: 65% center; }
  .catalog-hero__overlay { background: linear-gradient(90deg, rgba(3, 19, 38, .98), rgba(3, 19, 38, .67)); }
  .catalog-breadcrumb { margin-bottom: 4.5rem; }
  .catalog-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .catalog-intro, .catalog-group { padding-top: 3.4rem; padding-bottom: 3.6rem; }
  .product-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .product-image-trigger { height: 155px; }
  .product-catalog-card__body { min-height: 104px; padding: .65rem; }
  .product-catalog-card h3 { font-size: .76rem; }
  .product-catalog-card a { font-size: .6rem; }
  .catalog-cta { min-height: 350px; }
  .catalog-cta__inner { min-height: 350px; }
  .catalog-cta__image { background-position: 72% center; }
  .product-modal { padding: .75rem; }
  .product-modal__dialog { display: block; max-height: calc(100vh - 24px); }
  .product-modal__media { min-height: 245px; height: 42vh; padding: 1.1rem; }
  .product-modal__content { padding: 2rem 1.25rem 1.4rem; }
  .product-modal__content h2 { font-size: 2rem; }
  .product-modal__content .button { width: 100%; }
}