/* Amsterdam Catálogo — página do modelo · prefixo .amp-cat-pg */
.amp-cat-pg {
	--c-creme: #F7F3EA; --c-papel: #FFFDF8; --c-tinta: #16130D; --c-tinta2: #5A5342;
	--c-ouro: #C39A50; --c-ouro2: #A8823E; --c-ourot: #7A5C22; --c-quente: #E7DECB; --c-wa: #1F7A4D;
	--c-serif: "Cormorant Garamond", Georgia, serif; --c-display: "Bebas Neue", Impact, sans-serif; --c-sans: "DM Sans", system-ui, -apple-system, Arial, sans-serif;
	max-width: 1180px; margin: 0 auto; padding: 18px 16px 72px; font-family: var(--c-sans); color: var(--c-tinta); font-size: 16px; line-height: 1.5;
}
.amp-cat-pg *, .amp-cat-pg *::before, .amp-cat-pg *::after { box-sizing: border-box; }
.amp-cat-pg h1, .amp-cat-pg h2 { color: var(--c-tinta); }
.amp-cat-pg img { display: block; max-width: 100%; }
.amp-cat-pg__trilha { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--c-tinta2); margin: 4px 0 18px; }
.amp-cat-pg__trilha a { color: var(--c-tinta2); text-decoration: none; }
.amp-cat-pg__trilha a:hover { color: var(--c-ouro2); text-decoration: underline; }

.amp-cat-pg__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.amp-cat-pg__foto { position: sticky; top: 90px; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #F1EADB; border: 1px solid var(--c-quente); }
.amp-cat-pg__foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.amp-cat-pg__selo { position: absolute; top: 14px; left: 14px; padding: 5px 11px 4px; border-radius: 999px; background: var(--c-tinta); color: #E4C77E; font: 400 14px/1 var(--c-display); letter-spacing: .1em; }

.amp-cat-pg__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.amp-cat-pg__kicker { margin: 0; font: 400 15px/1.2 var(--c-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ourot); }
.amp-cat-pg__titulo { margin: 0; font: 600 clamp(34px, 4.2vw, 50px)/1.02 var(--c-serif); letter-spacing: -.01em; text-wrap: balance; }
.amp-cat-pg__det { margin: 0; display: grid; border-top: 1px solid var(--c-quente); }
.amp-cat-pg__det > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--c-quente); }
.amp-cat-pg__det dt { font: 400 15px/1.3 var(--c-display); letter-spacing: .12em; color: var(--c-ouro2); }
.amp-cat-pg__det dd { margin: 0; font-size: 15px; }
.amp-cat-pg__obs { margin: 0; font-size: 15px; color: var(--c-tinta); }
.amp-cat-pg__nota { margin: 0; font-size: 14px; color: var(--c-tinta2); }

.amp-cat-pg__acoes { display: flex; flex-direction: column; gap: 10px; }
.amp-cat-pg__acoes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.amp-cat-pg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--c-tinta); background: transparent; color: var(--c-tinta) !important; font: 600 15px/1 var(--c-sans); text-decoration: none !important; cursor: pointer; transition: background .2s; }
.amp-cat-pg__btn:hover { background: var(--c-creme); }
.amp-cat-pg__btn--wa { min-height: 56px; font-size: 16px; background: var(--c-wa); border-color: var(--c-wa); color: #fff !important; }
.amp-cat-pg__btn--wa:hover { background: #18663F; }
.amp-cat-pg__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.amp-cat-pg__btn:focus-visible, .amp-cat-pg a:focus-visible { outline: 2px solid var(--c-ouro); outline-offset: 2px; }

.amp-cat-pg__passos { list-style: none; margin: 4px 0 0; padding: 16px; display: grid; gap: 12px; background: var(--c-creme); border: 1px solid var(--c-quente); border-radius: 14px; counter-reset: p; }
.amp-cat-pg__passos li { counter-increment: p; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; font-size: 14px; }
.amp-cat-pg__passos li::before { content: counter(p); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-tinta); color: #E4C77E; font: 400 17px/1 var(--c-display); padding-top: 2px; }
.amp-cat-pg__passos b { font-weight: 600; }
.amp-cat-pg__passos span { color: var(--c-tinta2); }

.amp-cat-pg__vizinhos { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--c-tinta2); padding-top: 4px; }
.amp-cat-pg__vizinhos a { color: var(--c-tinta); font-weight: 600; text-decoration: none; }
.amp-cat-pg__vizinhos a:hover { color: var(--c-ouro2); }

.amp-cat-pg__rel { margin-top: 64px; }
.amp-cat-pg__rel-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 20px; }
.amp-cat-pg__rel-cab h2 { margin: 0; font: 600 clamp(28px, 3vw, 38px)/1.1 var(--c-serif); }
.amp-cat-pg__rel-cab a { color: var(--c-tinta); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--c-ouro); }
.amp-cat-pg__rel-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.amp-cat-pg__rel-lista a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding-bottom: 14px; background: var(--c-papel); border: 1px solid var(--c-quente); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--c-tinta); transition: box-shadow .2s, transform .2s; }
.amp-cat-pg__rel-lista a:hover { box-shadow: 0 14px 30px -18px rgba(22,19,13,.35); transform: translateY(-2px); }
.amp-cat-pg__rel-foto { display: block; aspect-ratio: 1 / 1; background: #fff; margin-bottom: 8px; overflow: hidden; }
.amp-cat-pg__rel-foto img { width: 100%; height: 100%; object-fit: contain; }
.amp-cat-pg__rel-nome, .amp-cat-pg__rel-mat { padding: 0 14px; }
.amp-cat-pg__rel-nome { font: 600 18px/1.15 var(--c-serif); }
.amp-cat-pg__rel-mat { font-size: 13px; color: var(--c-tinta2); }

@media (max-width: 860px) {
	.amp-cat-pg__grade { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.amp-cat-pg__foto { position: relative; top: 0; }
	.amp-cat-pg__rel-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.amp-cat-pg__det > div { grid-template-columns: 92px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .amp-cat-pg__rel-lista a { transition: none; } }