/* Casa Zarpellon — site público
   Traduzido do layout aprovado (design-reference/, Home e Edição): mesmas medidas,
   cores e tipografia, agora em classes. Diferenças decididas depois da aprovação:
   foto de modelo em 4:6 (era 1:1) e textos "Coleção"/"Dicas" no lugar de
   "Edição"/"Tendências". O painel tem CSS próprio; aqui os rótulos mantêm 0,24 em. */

:root {
    --ouro-300: #facb8d;
    --ouro-400: #e1ad66;
    --ouro-500: #c28d41;
    --ouro-550: #b68235;
    --ouro-600: #a06f24;
    --ouro-700: #7d5411;

    --tinta-100: #f8f4f4;
    --tinta-200: #eae9e9;
    --tinta-300: #d7d3d3;
    --tinta-400: #bab6b6;
    --tinta-500: #9b9797;
    --tinta-600: #7d7979;
    --tinta-700: #605d5d;
    --tinta-800: #444141;

    --escuro: #14130f;
    --escuro-2: #1f1d18;
    --janela: #e4e2e0;
    --papel: #ffffff;
    --superficie: #eae9e9;
    --texto: #201f1d;

    --filete: rgba(32, 31, 29, 0.16);
    --filete-no-escuro: rgba(243, 242, 242, 0.12);
    --filete-no-escuro-2: rgba(243, 242, 242, 0.16);

    --e1: 4.6px;
    --e2: 9.2px;
    --e3: 13.8px;
    --e4: 18.4px;
    --e6: 27.6px;
    --e8: 36.8px;
    --e12: 55px;

    --fonte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --largura: 1120px;
}

* { box-sizing: border-box; }
* { text-wrap: pretty; }

body { margin: 0; background: var(--janela); font-family: var(--fonte); color: var(--texto); }
a { color: var(--ouro-700); text-decoration: none; }
a:hover { color: var(--ouro-600); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--fonte); margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ouro-400); outline-offset: 2px; }

.pagina { background: var(--papel); min-height: 100vh; }
.escuro { background: var(--escuro); color: var(--papel); }

/* ---------- rótulos ---------- */

.kicker { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro-400); font-variant-numeric: tabular-nums; }
.kicker-pequeno { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.regua { width: 72px; height: 1px; background: var(--ouro-500); }

/* ---------- cabeçalho ---------- */

.topo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--e6);
    padding: var(--e6) var(--e12) var(--e4);
    border-bottom: 1px solid var(--filete-no-escuro);
}
.topo-nav { display: flex; gap: var(--e4); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.topo-nav a { color: var(--tinta-300); }
.topo-nav a:hover { color: var(--ouro-400); }
.topo-nav a[aria-current='page'] { color: var(--ouro-400); }
.topo-nav a[aria-current='page']:hover { color: var(--ouro-300); }
.topo-logo { display: block; width: 226px; height: 41px; margin: 0 auto; }
.topo-busca-area { display: flex; align-items: center; justify-content: flex-end; gap: var(--e4); }
.topo-busca {
    display: flex; align-items: center; gap: var(--e2);
    border-bottom: 1px solid rgba(243, 242, 242, 0.28);
    padding-bottom: var(--e1);
    width: 240px;
}
.topo-busca:focus-within { border-bottom-color: var(--ouro-400); }
.topo-busca svg { flex: none; }
.topo-busca input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--papel); font-family: var(--fonte); font-size: 13px; letter-spacing: 0.02em;
}
.topo-busca input::placeholder { color: var(--tinta-500); }

.trilha {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2);
    padding: var(--e3) var(--e12);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-500);
}
.trilha a { color: var(--tinta-500); }
.trilha a:hover { color: var(--ouro-400); }
.trilha .sep { color: #4b4741; }
.trilha .atual { color: var(--ouro-400); }

/* ---------- abertura (Home e Coleção) ---------- */

.abertura {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e12);
    padding: var(--e8) var(--e12) var(--e12);
    align-items: center;
}
.abertura-colecao { padding-top: var(--e4); align-items: end; }
.abertura-texto { min-width: 0; display: flex; flex-direction: column; gap: var(--e4); }
.abertura h1 {
    font-weight: 400; font-size: 60px; line-height: 1.06; letter-spacing: -0.03em; color: var(--tinta-100);
}
.abertura-colecao h1 { font-size: 56px; }
.abertura h1 strong { font-weight: 900; }
.abertura-texto > p, .abertura-texto > .descricao { font-size: 16px; line-height: 1.75; color: var(--tinta-300); text-align: justify; max-width: 44ch; }
.abertura-colecao .abertura-texto > p, .abertura-colecao .abertura-texto > .descricao { font-size: 15px; max-width: 46ch; }
.descricao { display: flex; flex-direction: column; gap: 0.9em; }
.descricao p { margin: 0; }
.abertura-acoes { display: flex; gap: var(--e3); padding-top: var(--e2); }
.abertura-numeros {
    display: flex; flex-wrap: wrap; gap: var(--e6); padding-top: var(--e1);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-500);
    font-variant-numeric: tabular-nums;
}

.btn-contorno {
    display: inline-block;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ouro-400); border: 1px solid var(--ouro-500);
    padding: var(--e3) var(--e6);
}
.btn-contorno:hover { background: rgba(225, 173, 102, 0.1); color: var(--ouro-400); }

/* Placa: a moldura escura das fotos */
.placa { margin: 0; background: var(--escuro-2); padding: var(--e3); }
.placa img { display: block; width: 100%; height: 440px; object-fit: cover; filter: saturate(0.95); }
.abertura-colecao .placa img { height: 380px; object-position: center 25%; }
.placa figcaption {
    display: flex; justify-content: space-between; gap: var(--e3);
    padding-top: var(--e2);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-500);
}
.placa figcaption span:last-child { font-variant-numeric: tabular-nums; flex: none; }
.placa-vazia { height: 440px; background: var(--escuro); }

/* ---------- seções com título ---------- */

.secao { padding: var(--e12); }
.secao-titulo {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--e6);
    border-bottom: 1px solid var(--texto);
    padding-bottom: var(--e2); margin-bottom: var(--e6);
}
.secao-titulo h2 { font-weight: 400; font-size: 32px; letter-spacing: -0.015em; }
.escuro .secao-titulo { border-bottom-color: rgba(243, 242, 242, 0.24); }
.escuro .secao-titulo h2 { color: var(--tinta-100); }
.ver-todas {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ouro-700); border-bottom: 1px solid rgba(182, 130, 53, 0.5); padding-bottom: 2px;
}
.ver-todas:hover { color: var(--ouro-600); border-bottom-color: var(--ouro-600); }
.escuro .ver-todas { color: var(--ouro-400); border-bottom-color: rgba(225, 173, 102, 0.35); }
.escuro .ver-todas:hover { color: var(--ouro-300); border-bottom-color: var(--ouro-300); }

/* ---------- cartões de coleção ---------- */

.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); }
.cartao { display: flex; flex-direction: column; gap: var(--e3); color: var(--texto); }
.cartao:hover { color: var(--texto); }
.cartao:hover img { opacity: 0.9; }
.cartao-quadro { background: var(--escuro-2); padding: var(--e2); }
.cartao img { display: block; width: 100%; height: 250px; object-fit: cover; filter: saturate(0.94); background: var(--superficie); }
.sem-capa { display: block; height: 250px; background: var(--escuro); }
.dica .sem-capa { height: 220px; background: var(--superficie); margin-bottom: var(--e1); }
.cartao .kicker-pequeno { color: var(--ouro-700); }
.cartao h3 { font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.cartao p { font-size: 13px; line-height: 1.65; color: var(--tinta-700); }
.escuro .cartao, .escuro .cartao:hover { color: var(--papel); }
.escuro .cartao .kicker-pequeno { color: var(--ouro-400); }
.escuro .cartao p { color: var(--tinta-400); }
.escuro .cartao img { filter: saturate(0.95); }

/* Dicas (a seção "Tendências" do layout) */
.dicas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e8); }
.dica { display: flex; flex-direction: column; gap: var(--e2); border-top: 1px solid var(--ouro-550); padding-top: var(--e3); color: var(--texto); }
.dica:hover { color: var(--texto); }
.dica:hover img { opacity: 0.9; }
.dica img { display: block; width: 100%; height: 220px; object-fit: cover; background: var(--superficie); filter: saturate(0.94); margin-bottom: var(--e1); }
.dica .kicker-pequeno { color: var(--ouro-700); }
.dica h3 { font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.dica p { font-size: 14px; line-height: 1.7; color: var(--tinta-800); text-align: justify; }

.vazio { font-size: 14px; color: var(--tinta-600); }
.escuro .vazio { color: var(--tinta-500); }

/* ---------- página da coleção ---------- */

.indice-linhas {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
    padding: var(--e4) var(--e12);
    background: var(--superficie); border-bottom: 1px solid var(--filete);
    position: sticky; top: 0; z-index: 5;
}
.indice-linhas > span { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-600); margin-right: var(--e1); }
.indice-linhas a {
    font-size: 12px; letter-spacing: 0.06em; color: var(--tinta-800);
    border: 1px solid var(--filete); padding: 6px var(--e3);
}
.indice-linhas a:hover { border-color: var(--ouro-550); color: var(--ouro-700); }
.indice-linhas a[aria-current='true'] { color: var(--ouro-700); border-color: var(--ouro-550); background: rgba(182, 130, 53, 0.08); }

.linha { padding: 0 var(--e12) var(--e12); scroll-margin-top: 64px; }
.linha:first-of-type { padding-top: var(--e12); }
.linha-cabeca {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e6);
    border-bottom: 1px solid var(--texto);
    padding-bottom: var(--e4); margin-bottom: var(--e6);
}
.linha-cabeca > div { display: flex; flex-direction: column; gap: var(--e2); max-width: 62ch; }
.linha-cabeca, .secao-titulo, .paginacao { min-width: 0; }
.linha-cabeca h2, .abertura h1, .cartao h3, .dica h3 { overflow-wrap: anywhere; }
.linha-cabeca h2 { font-weight: 500; font-size: 32px; letter-spacing: -0.02em; }
.linha-cabeca p, .linha-cabeca .descricao { font-size: 14px; line-height: 1.7; color: var(--tinta-800); }

.btn-material {
    display: flex; align-items: center; gap: var(--e2); flex: none;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ouro-700); border: 1px solid var(--ouro-550);
    padding: var(--e3) var(--e4);
}
.btn-material:hover { background: rgba(182, 130, 53, 0.08); color: var(--ouro-700); }

/* Fotos de modelo: 4:6, em páginas de N (configurado por linha) */
.modelo { margin-bottom: var(--e6); }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e1); }
.grade .item { position: relative; }
.grade a { display: block; cursor: zoom-in; }
.grade a:hover { opacity: 0.86; }
.grade-modelo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grade-modelo img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: saturate(0.94); background: var(--superficie); }
.grade-produto a { background: #fff; }

/* Seleção: quadradinho no canto da foto (visível ao passar o mouse, sempre no toque) */
.marcar {
    position: absolute; top: var(--e2); left: var(--e2);
    width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(20, 19, 15, 0.45);
    color: transparent; cursor: pointer;
    opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
}
.grade-produto .marcar { border-color: var(--tinta-500); background: rgba(255, 255, 255, 0.85); }
.item:hover .marcar, .marcar:focus-visible, .com-selecao .marcar, .item.marcada .marcar { opacity: 1; }
@media (hover: none) { .marcar { opacity: 1; } }
.item.marcada .marcar { background: var(--ouro-600); border-color: var(--ouro-600); color: #fff; }
.item.marcada::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--ouro-600); pointer-events: none; }

.linha-botoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.btn-material .peso { color: var(--tinta-600); letter-spacing: 0.08em; margin-left: var(--e1); }

/* Barra das selecionadas */
.selecao {
    position: fixed; left: 50%; bottom: var(--e4); transform: translateX(-50%); z-index: 40;
    width: min(1120px, calc(100vw - 2 * var(--e4)));
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4);
    background: var(--escuro); color: var(--tinta-100);
    padding: var(--e3) var(--e4);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.selecao[hidden] { display: none; }
.selecao-conta { font-size: 13px; font-variant-numeric: tabular-nums; }
.selecao-conta strong { color: var(--ouro-400); font-weight: 500; }
.selecao-aviso { flex-basis: 100%; order: 3; font-size: 12px; color: var(--ouro-300); }
.selecao-acoes { display: flex; gap: var(--e2); }
.btn-claro, .btn-ouro {
    font-family: var(--fonte); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: var(--e2) var(--e4); cursor: pointer; background: transparent;
}
.btn-claro { color: var(--tinta-300); border: 1px solid rgba(243, 242, 242, 0.28); }
.btn-claro:hover { border-color: var(--tinta-300); }
.btn-ouro { color: var(--escuro); background: var(--ouro-400); border: 1px solid var(--ouro-400); }
.btn-ouro:hover { background: var(--ouro-300); border-color: var(--ouro-300); }
.btn-ouro:disabled { opacity: 0.45; cursor: default; }
.com-selecao .rodape { padding-bottom: 110px; }

/* Visualizador (carrossel), como no layout aprovado */
.vis-aberto, .vis-aberto body { overflow: hidden; }
.visualizador {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(243, 242, 242, 0.96);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--e6); padding: var(--e8) var(--e6);
}
.visualizador[hidden] { display: none; }
.vis-palco { display: flex; align-items: center; gap: var(--e4); width: 100%; max-width: 1000px; flex: 1; min-height: 0; }
.vis-seta, .vis-botao {
    display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
    background: transparent; border: 1px solid rgba(32, 31, 29, 0.2); color: var(--tinta-800); cursor: pointer;
}
.vis-seta { width: 44px; height: 44px; }
.vis-seta:hover, .vis-botao:hover { border-color: var(--ouro-550); color: var(--ouro-700); }
.vis-quadro { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; }
.vis-quadro img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.vis-acoes { position: absolute; top: var(--e3); right: var(--e3); display: flex; gap: var(--e2); }
.vis-botao { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.92); }
.vis-marcar[aria-pressed='true'] { background: var(--ouro-600); border-color: var(--ouro-600); color: #fff; }
.vis-rodape { display: flex; flex-direction: column; align-items: center; gap: var(--e2); width: 100%; max-width: 1000px; }
.vis-contador { font-size: 11px; letter-spacing: 0.16em; color: var(--tinta-500); font-variant-numeric: tabular-nums; }
.vis-miniaturas { display: flex; gap: var(--e2); overflow-x: auto; max-width: 100%; padding: var(--e1) 0; }
.vis-miniaturas button { flex: none; width: 76px; height: 76px; padding: 0; background: #fff; cursor: pointer; border: 1px solid var(--filete); opacity: 0.55; }
.vis-miniaturas button[aria-current] { border-color: var(--ouro-550); opacity: 1; }
.vis-miniaturas img { display: block; width: 100%; height: 100%; object-fit: contain; }
.grade-produto img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.modelo-pagina[hidden] { display: none; }

.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding-top: var(--e3); }
.paginacao > span { white-space: nowrap; }
.paginacao nav { flex-wrap: wrap; }
.paginacao button[hidden] { display: none; }
.paginacao .reticencias { width: 20px; text-align: center; color: var(--tinta-600); font-size: 12px; }
.paginacao .reticencias[hidden] { display: none; }
.paginacao > span b { font-weight: inherit; }
.paginacao > span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-600); font-variant-numeric: tabular-nums; }
.paginacao nav { display: flex; align-items: center; gap: var(--e1); }
.paginacao button {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    font-family: var(--fonte); font-size: 12px; font-variant-numeric: tabular-nums;
    background: transparent; border: 1px solid var(--filete); color: var(--tinta-700); cursor: pointer;
}
.paginacao button:hover { border-color: var(--ouro-550); color: var(--ouro-700); }
.paginacao button[aria-current='true'] { color: var(--ouro-700); border-color: var(--ouro-550); background: rgba(182, 130, 53, 0.08); }

.anteriores { border-top: 1px solid var(--filete); }
.anteriores .cartao img { filter: saturate(0.94); }

/* ---------- rodapé ---------- */

.rodape { background: var(--escuro); color: var(--tinta-200); padding: var(--e8) var(--e12) var(--e6); }
.rodape-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e8) var(--e12); align-items: start; }
.rodape-marca { display: flex; flex-direction: column; gap: var(--e3); }
.rodape-marca img { display: block; width: 226px; height: 41px; }
.rodape p { font-size: 13px; line-height: 1.65; color: var(--tinta-400); }
.redes { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: var(--e1); }
.redes a {
    display: flex; align-items: center;
    height: 32px;
    color: #fff;   /* ícones brancos, sem borda (29/09) */
}
.redes a:hover { color: var(--ouro-300); }
.rodape-lista { display: flex; flex-direction: column; gap: var(--e2); }
.rodape-lista > span, .rodape-lojistas > span { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-500); }
.rodape-lista a { font-size: 14px; color: var(--tinta-200); }
.rodape-lista a:hover { color: var(--ouro-400); }
.rodape-lojistas {
    display: flex; flex-direction: column; gap: var(--e2); max-width: 320px;
    border-left: 1px solid var(--filete-no-escuro-2); padding-left: var(--e6);
}
.rodape-lojistas strong { font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; color: var(--tinta-100); }
.rodape-lojistas .btn-contorno { align-self: flex-start; margin-top: var(--e1); padding: var(--e2) var(--e4); }
.rodape-lojistas .btn-contorno:hover { color: var(--ouro-300); }
.rodape-base {
    display: flex; justify-content: space-between; gap: var(--e6);
    margin-top: var(--e6); padding-top: var(--e3);
    border-top: 1px solid var(--filete-no-escuro-2);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-600);
}

.faixa-previa { position: sticky; top: 0; z-index: 30; background: var(--ouro-400); color: var(--escuro); padding: var(--e2) var(--e12); font-size: 13px; }
.faixa-previa a { color: var(--escuro); text-decoration: underline; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- telas largas: layout fluido, mais colunas para as fotos não crescerem demais ---------- */

/* Modelo em 6 colunas (25/09); a página mostra de 6 em 6, então as fileiras sempre fecham.
   Produto e busca ganham colunas nas telas largas. */
@media (min-width: 1440px) {
    .grade-produto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grade-busca { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1900px) {
    .grade-produto { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .grade-busca { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .placa img { height: 560px; }
    .abertura-colecao .placa img { height: 480px; }
}

/* ---------- telas menores (o protótipo só tinha desktop) ---------- */

@media (max-width: 960px) {
    .topo { grid-template-columns: minmax(0, 1fr); padding: var(--e6) var(--e4) var(--e4); gap: var(--e8); }
    .topo > a { grid-row: 1; justify-self: center; }
    .topo-logo { margin: 0 auto; width: 220px; height: auto; }
    .topo-nav { grid-row: 2; }
    .topo-busca-area { grid-row: 3; justify-content: stretch; }
    .topo-busca { width: 100%; }
    .trilha, .indice-linhas { padding-left: var(--e4); padding-right: var(--e4); }
    .abertura { grid-template-columns: minmax(0, 1fr); gap: var(--e6); padding: var(--e6) var(--e4) var(--e8); }
    .abertura h1, .abertura-colecao h1 { font-size: 40px; }
    .abertura-texto > p, .abertura-texto > .descricao { text-align: left; }
    .abertura-colecao .placa { order: -1; }                 /* na coleção, a imagem vem antes do texto */
    .secao-titulo h2 { font-size: 24px; }
    .ver-todas { white-space: nowrap; }
    .placa img, .abertura-colecao .placa img { height: 320px; }
    .secao, .linha { padding-left: var(--e4); padding-right: var(--e4); }
    .secao { padding-top: var(--e8); padding-bottom: var(--e8); }
    .linha:first-of-type { padding-top: var(--e8); }
    .cartoes, .dicas { grid-template-columns: 1fr; }
    .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodape { padding: var(--e8) var(--e4) var(--e6); }
    .visualizador { padding: var(--e4) var(--e2); gap: var(--e3); }
    .vis-seta { display: none; }
    .vis-miniaturas button { width: 56px; height: 56px; }
    .linha-cabeca .linha-botoes { width: 100%; }
    .rodape-lojistas { border-left: 0; padding-left: 0; border-top: 1px solid var(--filete-no-escuro-2); padding-top: var(--e4); }
}

@media (max-width: 520px) {
    .rodape-base { flex-direction: column; gap: var(--e1); }
}

/* ---------- arquivo, dicas e busca (etapa 6), no mesmo desenho da abertura ---------- */
.cabeca-pagina { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e4) var(--e12) var(--e12); max-width: 760px; }
.cabeca-pagina h1 { font-weight: 400; font-size: 56px; line-height: 1.06; letter-spacing: -0.03em; color: var(--tinta-100); overflow-wrap: anywhere; }
.cabeca-pagina > p { font-size: 15px; line-height: 1.75; color: var(--tinta-300); max-width: 52ch; }
.anos { display: flex; flex-wrap: wrap; gap: var(--e2); padding-top: var(--e1); }
.anos a { font-size: 12px; letter-spacing: 0.06em; color: var(--tinta-300); border: 1px solid var(--filete-no-escuro-2); padding: 6px var(--e3); }
.anos a:hover { border-color: var(--ouro-500); color: var(--ouro-400); }
.rotulo-contagem { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-600); }
.busca-grande { display: flex; gap: var(--e3); align-items: stretch; max-width: 640px; }
.busca-grande input {
    flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(243, 242, 242, 0.28);
    color: var(--papel); font-family: var(--fonte); font-size: 18px; padding: var(--e2) 0; outline: none;
}
.busca-grande input:focus { border-bottom-color: var(--ouro-400); }
.busca-grande input::placeholder { color: var(--tinta-500); }
.busca-grande .btn-contorno { background: transparent; cursor: pointer; font-family: var(--fonte); }
.lista-linhas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete); }
.lista-linhas a { display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; padding: var(--e3) 0; border-bottom: 1px solid var(--filete); color: var(--texto); }
.lista-linhas a:hover strong { color: var(--ouro-700); }
.lista-linhas strong { font-weight: 500; font-size: 18px; }
.lista-linhas span { font-size: 13px; color: var(--tinta-700); }
.grupo-titulo { font-weight: 500; font-size: 16px; margin: var(--e6) 0 var(--e3); }
.grupo-titulo:first-of-type { margin-top: 0; }
.grupo-titulo a { color: var(--texto); }
.grupo-titulo a:hover { color: var(--ouro-700); }
.grade-busca { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grade-busca .peca { display: flex; flex-direction: column; gap: 2px; color: var(--texto); cursor: pointer; }
.peca img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.peca-modelo img { aspect-ratio: 2 / 3; object-fit: cover; background: var(--superficie); }
.peca-ref { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: var(--e1); overflow-wrap: anywhere; }
.peca-linha { font-size: 11px; color: var(--tinta-600); }
.peca:hover .peca-ref { color: var(--ouro-700); }
@media (max-width: 960px) {
    .cabeca-pagina { padding: var(--e4) var(--e4) var(--e8); }
    .cabeca-pagina h1 { font-size: 40px; }
    .grade-busca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- proteção das imagens e voltar ao topo (25/09) ---------- */
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

.voltar-topo {
    position: fixed; right: var(--e6); bottom: var(--e6); z-index: 45;
    width: 48px; height: 48px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--escuro); color: var(--ouro-400);
    border: 1px solid var(--ouro-500); cursor: pointer;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.voltar-topo.mostrar { opacity: 1; transform: none; pointer-events: auto; }
.voltar-topo:hover { background: var(--escuro-2); color: var(--ouro-300); }
.voltar-topo[hidden] { display: none; }
/* Com a barra de selecionadas aberta, o botão sobe para não ficar por cima dela. */
.com-selecao .voltar-topo { bottom: calc(var(--e6) + 96px); }
.vis-aberto .voltar-topo { display: none; }
@media (max-width: 960px) {
    .voltar-topo { right: var(--e4); bottom: var(--e4); width: 44px; height: 44px; }
    .com-selecao .voltar-topo { bottom: calc(var(--e4) + 140px); }
}