/* Catálogo para impressão (A4 retrato) */
:root { --ouro: #b8913a; --escuro: #121110; --suave: #6f6a61; --borda: #e7e1d6; --fundo: #f7f4ee; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #d9d4cb; color: var(--escuro); font-family: Inter, system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@page { size: A4; margin: 0; }

.barra-tela { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 16px; background: var(--escuro); color: #fff; font-size: 14px; flex-wrap: wrap; }
.barra-tela button { background: var(--ouro); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; font: 600 14px Inter, sans-serif; cursor: pointer; }
.barra-tela button:disabled { opacity: .5; cursor: wait; }

.pagina { width: 210mm; height: 297mm; margin: 12px auto; background: #fff; padding: 12mm 12mm 10mm; display: flex; flex-direction: column; overflow: hidden; page-break-after: always; break-after: page; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
@media print { html, body { background: #fff; } .barra-tela { display: none; } .pagina { margin: 0; box-shadow: none; } }

/* Capa */
.capa { background: var(--escuro); color: #fff; justify-content: space-between; align-items: center; text-align: center; padding: 22mm 16mm 16mm; }
.capa-logo { font: 700 30px "Playfair Display", serif; letter-spacing: .1em; }
.capa-logo span, .cab-logo span { font: 600 12px Inter, sans-serif; letter-spacing: .3em; color: var(--ouro); margin-left: 8px; text-transform: uppercase; }
.capa h1 { font: 700 54px/1.1 "Playfair Display", serif; margin: 0; }
.capa h1 em { color: var(--ouro); font-style: normal; }
.capa-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10mm; width: 100%; }
.capa-fotos img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 14px; padding: 6mm; }
.capa-num { font-size: 18px; margin: 0; } .capa-num b { color: var(--ouro); font-size: 24px; }
.capa-rodape { font-size: 12px; color: #bdb6a8; margin: 0; letter-spacing: .04em; }

/* Páginas internas */
.cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--escuro); padding-bottom: 3mm; margin-bottom: 4mm; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--suave); }
.cab-logo { font: 700 18px "Playfair Display", serif; letter-spacing: .1em; color: var(--escuro); text-transform: none; }
.grade { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4mm; min-height: 0; }
.cartao { border: 1px solid var(--borda); border-radius: 10px; display: grid; grid-template-columns: 38mm minmax(0, 1fr); gap: 3mm; padding: 3mm; overflow: hidden; break-inside: avoid; }
.cartao-foto { background: #fff; display: flex; align-items: center; justify-content: center; }
.cartao-foto img { width: 100%; height: 100%; max-height: 72mm; object-fit: contain; }
.cartao-info { display: flex; flex-direction: column; min-width: 0; }
.cartao-topo { display: flex; flex-direction: column; }
.cartao-topo h3 { margin: 0; font: 700 17px "Playfair Display", serif; letter-spacing: .02em; white-space: nowrap; }
.cartao-topo span { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ouro); }
.cartao-sub { margin: 1mm 0 2mm; font-size: 9.5px; color: var(--suave); }
.cores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2mm; align-content: start; }
.cores figure { margin: 0; text-align: center; }
.cores img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--fundo); border-radius: 6px; padding: 1mm; }
.cores figcaption { font-size: 7.5px; line-height: 1.25; color: var(--escuro); margin-top: .6mm; overflow-wrap: anywhere; }
.cores figcaption small { display: block; color: var(--suave); font-size: 6.5px; letter-spacing: .02em; }
.cores-texto { margin: 2mm 0 0; font-size: 7.5px; color: var(--suave); line-height: 1.35; }
.cores-texto small { font-size: 6.5px; }
.rodape { display: flex; justify-content: space-between; margin-top: 4mm; padding-top: 2mm; border-top: 1px solid var(--borda); font-size: 9px; color: var(--suave); }
