/* ═══════════════════════════════════════════════════════════
   EDUARTE — páginas de catálogo (marca e produto)
   Complementa site.css com os mesmos tokens de "Aço e brasa".
   ═══════════════════════════════════════════════════════════ */

.cat-nav { background: color-mix(in oklch, var(--color-ground) 92%, transparent); backdrop-filter: blur(10px); }
.cat-nav a[aria-current="page"] { color: var(--color-ink); }

.wrap { margin-inline: auto; max-width: 88rem; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 2rem; } }

.cat-topo { padding-block: 8.5rem 3.5rem; border-bottom: 1px solid var(--color-line); position: relative; overflow: hidden; }
@media (min-width: 1024px) { .cat-topo { padding-block: 10.5rem 4.5rem; } }

.trilha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.75rem; }
.trilha a { color: var(--color-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.trilha a:hover { color: var(--color-ink); }
.trilha span[aria-hidden] { color: var(--color-line-bright); }

.cat-titulo { font-size: clamp(2.3rem, 6vw, 4.8rem); max-width: 16ch; }
.cat-sub { margin-top: 1.5rem; color: var(--color-dim); font-size: 1.0625rem; line-height: 1.65; max-width: 58ch; }

.secao { padding-block: 4rem; }
@media (min-width: 1024px) { .secao { padding-block: 6rem; } }
.secao + .secao { border-top: 1px solid var(--color-line); }
.secao-alt { background: var(--color-surface); }

/* grade de produtos */
.grade-produtos { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card-produto { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-line); color: inherit; text-decoration: none; transition: border-color .3s; }
.card-produto:hover, .card-produto:focus-visible { border-color: var(--color-line-bright); }
.card-produto figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-2); }
.card-produto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.card-produto:hover img { transform: scale(1.04); }
.card-produto .corpo { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card-produto h3 { font-size: 1.45rem; color: var(--color-ink); }
.card-produto p { color: var(--color-dim); font-size: .95rem; line-height: 1.55; }
.card-produto .ver { margin-top: auto; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-line); color: var(--color-ink); }
.card-produto .ver svg { color: var(--color-brand); }

.selo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; color: var(--color-dim); letter-spacing: .04em; }
.selo::before { content: ""; width: .5rem; height: .5rem; background: var(--color-brand); }

/* página de produto */
.produto { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .produto { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }

.galeria-principal { margin: 0; aspect-ratio: 4 / 5; border: 1px solid var(--color-line); overflow: hidden; background: var(--color-surface-2); }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas { margin-top: .75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.miniaturas button { padding: 0; border: 1px solid var(--color-line); background: none; aspect-ratio: 1; overflow: hidden; cursor: pointer; opacity: .6; transition: opacity .25s, border-color .25s; }
.miniaturas button[aria-current="true"], .miniaturas button:hover { opacity: 1; border-color: var(--color-brand); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.ficha { border-top: 1px solid var(--color-line); margin-top: 2rem; }
.ficha div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--color-line); }
.ficha dt { color: var(--color-muted); font-size: .9rem; }
.ficha dd { margin: 0; color: var(--color-ink); font-size: .95rem; }

.acoes { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.aviso { margin-top: 1.25rem; color: var(--color-muted); font-size: .88rem; line-height: 1.55; }

.lista-pontos { margin-top: 2rem; display: grid; gap: 1rem; }
.lista-pontos li { display: flex; gap: .9rem; border-top: 1px solid var(--color-line); padding-top: 1rem; color: var(--color-dim); font-size: .95rem; line-height: 1.5; }
.lista-pontos li span:first-child { color: var(--color-brand); font-family: var(--font-mono); font-size: .8rem; padding-top: .15rem; }

.cta-faixa { display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; }
@media (min-width: 900px) { .cta-faixa { flex-direction: row; align-items: center; } }
.cta-faixa h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); max-width: 22ch; }

.cat-topo-trilha { padding-bottom: 0; border-bottom: 0; }
@media (min-width: 1024px) { .cat-topo-trilha { padding-bottom: 0; } }
.secao-produto { padding-top: 1.5rem; }
@media (min-width: 1024px) { .secao-produto { padding-top: 1.5rem; } .produto-info { position: sticky; top: 7rem; } }

.topo-grade { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .topo-grade { margin-bottom: 3.5rem; } }
.titulo-secao { font-size: clamp(1.7rem, 3.6vw, 2.8rem); }
.titulo-produto { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.rodape-cat { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }

/* opção B — catálogo com fotos do fabricante */
.chips { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-dim); font-size: .9rem; text-decoration: none; transition: border-color .25s, color .25s; }
.chip:hover { border-color: var(--color-brand); color: var(--color-ink); }
.chip span { font-family: var(--font-mono); font-size: .75rem; color: var(--color-muted); }
.card-catalogo figure, .galeria-fabricante { background: #f4f3f1; }
.card-catalogo img, .galeria-fabricante img { object-fit: contain; }
.card-catalogo:hover img { transform: scale(1.03); }
.galeria-fabricante { aspect-ratio: 4 / 3; }
.card-produto .modelos { font-family: var(--font-mono); font-size: .78rem; color: var(--color-muted); }
.rotulo-modelos { margin-top: 2rem; }
.lista-modelos { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.lista-modelos li { border: 1px solid var(--color-line-bright); padding: .3rem .65rem; font-family: var(--font-mono); font-size: .8rem; color: var(--color-ink); }
.miniaturas button { background: #f4f3f1; }
.miniaturas img { object-fit: contain; }
[id] { scroll-margin-top: 6rem; }

/* página Sobre */
.sobre-foto { aspect-ratio: 4 / 3; }
.sobre-h2 { margin-top: 1rem; }
.pilares { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pilares li { border-top: 1px solid var(--color-line-bright); padding: 1.5rem 0 .5rem; }
.pilares .label { color: var(--color-brand); }
.pilares h3 { margin-top: .75rem; font-size: 1.3rem; color: var(--color-ink); }
.pilares p { margin-top: .6rem; color: var(--color-dim); font-size: .95rem; line-height: 1.55; }