/* Catálogo de ótica: papel branco das fotos de estúdio, tinta preta, vinho do livro das fotos, verde de lente G15.
   Tabela de Snellen como abertura; o resto é um catálogo silencioso. */
:root{
  --papel:#ffffff; --tinta:#1d1c1a; --cinza:#6e6a64; --linha:#e6e3de; --vinho:#7b2d26; --lente:#3e5b47; --fundo-foto:#f4f3f1;
  --f-ui:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-tabela:"Zilla Slab",Rockwell,"Courier New",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.55 var(--f-ui);}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px}
.topo{border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-block:14px}
.marca{font-family:var(--f-tabela);font-weight:600;font-size:1.15rem;letter-spacing:.02em;text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.95rem}
.nav a{text-decoration:none;color:var(--cinza)}
.nav a:hover,.nav a[aria-current]{color:var(--tinta);text-decoration:underline;text-underline-offset:4px}

/* tabela de Snellen */
.snellen{padding-block:56px 40px;border-bottom:1px solid var(--linha)}
.snellen ol{list-style:none;margin:0;padding:0;display:grid;gap:.18em}
.snellen li{display:grid;grid-template-columns:4.5rem 1fr 4.5rem;align-items:baseline;gap:12px}
.snellen .fr{font:500 .72rem/1 var(--f-ui);color:var(--cinza);font-variant-numeric:tabular-nums}
.snellen .fr.d{text-align:right}
.snellen .ln{text-align:center;font-family:var(--f-tabela);font-weight:600;letter-spacing:.14em;line-height:1.05;text-wrap:balance}
.snellen .ln a{text-decoration:none}
.snellen .ln a:hover{color:var(--vinho)}
.l1{font-size:clamp(3rem,11vw,8.5rem)}
.l2{font-size:clamp(2.2rem,8vw,6rem)}
.l3{font-size:clamp(1.15rem,3.1vw,2.3rem)}
.l4{font-size:clamp(.95rem,2.2vw,1.55rem)}
.l5{font-size:clamp(.85rem,1.7vw,1.15rem)}
.l6{font-size:clamp(.8rem,1.3vw,.95rem);letter-spacing:.06em!important;font-weight:400!important;color:var(--cinza)}
.snellen .ln span+span::before,.snellen .ln a+a::before{content:"  ";white-space:pre}
.l3 a,.l4 a,.l5 a{margin:0 .35em;display:inline-block}
@media (max-width:640px){.snellen li{grid-template-columns:1fr}.snellen .fr{display:none}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec{padding-block:44px}
.sec+.sec{border-top:1px solid var(--linha)}
.sec h2{font-family:var(--f-tabela);font-weight:600;font-size:1.6rem;margin:0 0 4px}
.sub{color:var(--cinza);margin:0 0 24px;max-width:62ch}
.mais{display:inline-block;margin-top:24px}

/* grade de peças */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,44vw),1fr));gap:28px 16px;list-style:none;margin:0;padding:0}
.peca{min-width:0}
.peca a{text-decoration:none;display:grid;gap:8px}
.peca .img{aspect-ratio:1;background:var(--fundo-foto);overflow:hidden}
.peca img{width:100%;height:100%;object-fit:cover}
.peca .t{font-size:.9rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.peca .p{font-size:.88rem;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.peca a:hover .t{text-decoration:underline;text-underline-offset:3px}
.ok{display:inline-flex;align-items:center;gap:6px}.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lente)}
.vd{color:var(--vinho)}
.peca.vendida img{filter:grayscale(1);opacity:.8}

.cabeca{padding-block:40px 8px}
.cabeca h1{font-family:var(--f-tabela);font-weight:600;font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.1;margin:0 0 8px;text-wrap:balance}
.irmas{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:.92rem}
.irmas a{color:var(--cinza)}
.irmas a[aria-current]{color:var(--tinta);font-weight:600;text-decoration:none}
.rot{font-size:.95rem;font-weight:600;margin:40px 0 16px}

/* página da peça */
.ficha{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;padding-block:32px 48px}
@media (max-width:820px){.ficha{grid-template-columns:1fr;gap:28px}}
.fotos{display:grid;gap:12px}
.fotos .principal{background:var(--papel);aspect-ratio:3/4;overflow:hidden}
.fotos .principal img{width:100%;height:100%;object-fit:contain}
@media (max-width:820px){.fotos .principal{aspect-ratio:auto;max-height:72vh}.fotos .principal img{max-height:72vh}}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.miniaturas button{padding:0;border:1px solid var(--linha);background:var(--fundo-foto);width:72px;aspect-ratio:1;cursor:pointer}
.miniaturas button[aria-pressed="true"]{border-color:var(--tinta)}
.miniaturas img{width:100%;height:100%;object-fit:cover}
.info{min-width:0;position:sticky;top:24px;align-self:start}
@media (max-width:820px){.info{position:static}}
.trilha{font-size:.85rem;color:var(--cinza);margin:0 0 12px}
.trilha a{color:var(--cinza)}
.info h1{font-family:var(--f-tabela);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;margin:0 0 16px;text-wrap:balance}
.preco{font-size:1.35rem;font-variant-numeric:tabular-nums;margin:0 0 16px}
.preco s{color:var(--cinza);font-size:.95rem;margin-left:8px}
.btn{display:inline-block;background:var(--tinta);color:var(--papel);text-decoration:none;padding:14px 22px;font-weight:600}
.btn:hover{background:var(--vinho)}
.nota{font-size:.85rem;color:var(--cinza);margin:10px 0 0;max-width:46ch}
.carimbo{display:inline-block;border:2px solid var(--vinho);color:var(--vinho);font-family:var(--f-tabela);font-weight:600;padding:4px 12px;letter-spacing:.08em;transform:rotate(-2deg);margin:0 0 12px}
.desc{margin:28px 0 0;max-width:62ch}
dl.dados{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--linha);font-size:.95rem}
dl.dados dt{color:var(--cinza)}
dl.dados dd{margin:0}

.sobre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
@media (max-width:820px){.sobre{grid-template-columns:1fr}}
.sobre p{margin:0 0 14px;max-width:62ch}
.indice{columns:2;column-gap:32px;list-style:none;margin:0;padding:0;font-size:.95rem}
.indice li{break-inside:avoid;display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--linha)}
.indice span{color:var(--cinza);font-variant-numeric:tabular-nums}
@media (max-width:480px){.indice{columns:1}}

.rodape{border-top:1px solid var(--linha);margin-top:24px}
.rodape .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:24px;font-size:.88rem;color:var(--cinza)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}