/* 11/10: estilo de catálogo y páginas de artículo (misma paleta y letras que la portada: papel, hierro, óxido; Fraunces + Inter) */
:root{--papel:#f4f0ea;--papel2:#ebe5dc;--tinta:#1d1b18;--gris:#5f5a52;--linea:#d8d0c4;--hierro:#26272a;--oxido:#a8502a;--ok:#1f7a4d;--mp:#00a3e0}
*{box-sizing:border-box}html{overflow-x:hidden}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
.env{max-width:1240px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}h2{font-size:1.6rem;margin:38px 0 14px}h3{font-size:1.05rem}
.ante{font:600 .74rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--oxido);margin:22px 0 10px}
.suave{color:var(--gris);font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--tinta);color:var(--papel);text-decoration:none;font:600 .95rem Inter,sans-serif;padding:13px 22px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px);background:#000}.btn:disabled{opacity:.6;cursor:wait}
.btn.wa{background:var(--ok)}.btn.wa:hover{background:#17603c}.btn.claro{background:transparent;color:var(--tinta);border:1.5px solid var(--tinta)}
.btn.mp{background:var(--mp);padding:9px 14px;font-size:.85rem;white-space:nowrap}.btn.mp:hover{background:#0089bd}
.btn.ancho{width:100%;margin-top:16px}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--oxido);outline-offset:3px}
header{position:sticky;top:0;z-index:10;background:rgba(244,240,234,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
header .env{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo img{height:46px;width:auto}
header nav{display:flex;gap:24px;font-size:.95rem}header nav a{text-decoration:none;color:var(--gris)}header nav a:hover{color:var(--tinta)}
.der{display:flex;align-items:center;gap:14px}header .btn{padding:10px 18px;font-size:.9rem}
.uy{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--gris);white-space:nowrap}.uy svg{width:27px;height:18px;border:1px solid var(--linea);border-radius:2px}
.ig{display:inline-grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--linea);border-radius:50%;color:var(--tinta)}.ig svg{width:19px;height:19px}.ig:hover{border-color:var(--oxido);color:var(--oxido)}
@media(max-width:1060px){.uy span{display:none}}@media(max-width:860px){header nav{display:none}}@media(max-width:560px){header .btn{display:none}}
.pagina{padding-bottom:70px}
.migas{font-size:.85rem;color:var(--gris);margin:18px 0 0}.migas a{text-decoration:none}.migas a:hover{text-decoration:underline}
/* catálogo */
.filtros{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:26px 0 26px}
.ambientes{display:flex;gap:8px;flex-wrap:wrap}
.ambientes button{font:600 .88rem Inter,sans-serif;padding:8px 15px;border-radius:999px;border:1.5px solid var(--linea);background:transparent;color:var(--gris);cursor:pointer}
.ambientes button:hover{border-color:var(--tinta);color:var(--tinta)}.ambientes button[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
#buscar{font:inherit;padding:10px 16px;border:1.5px solid var(--linea);border-radius:999px;background:#fff;min-width:0;width:260px;max-width:100%}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.art{text-decoration:none;animation:entra .4s ease both}.art[hidden]{display:none}
.art .foto{overflow:hidden;border-radius:4px;background:var(--papel2)}.art img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .45s}.art:hover img{transform:scale(1.04)}
.art h3{margin:12px 0 2px;font-size:1rem}.art p{margin:0;color:var(--oxido);font-weight:600;font-size:.95rem}
@keyframes entra{from{transform:translateY(8px)}to{transform:none}}
/* artículo: al costado productos al azar y del mismo ambiente */
.tres{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;gap:34px;margin-top:20px}
.tres>article{min-width:0}
.lado h4{font:600 .74rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 12px}
.lado{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:14px}
.mini{display:flex;flex-direction:column;gap:6px;text-decoration:none;font-size:.85rem;line-height:1.35}
.mini img{aspect-ratio:4/3;object-fit:cover;border-radius:4px}.mini b{display:block;color:var(--oxido);margin-top:2px}.mini:hover span{text-decoration:underline}
@media(max-width:1100px){.tres{grid-template-columns:minmax(0,1fr)}.tres>article{order:1}.lado{order:2;position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.lado h4{grid-column:1/-1;margin:20px 0 0}}
@media(max-width:600px){.lado{grid-template-columns:1fr 1fr}}
.galeria #gPrin{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--papel2)}
.miniaturas{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.miniaturas button{padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;width:82px}.miniaturas button:hover{border-color:var(--oxido)}
.miniaturas img{aspect-ratio:1;object-fit:cover;border-radius:2px}
.precio{font-size:1.15rem;color:var(--gris);margin:10px 0 18px}.precio b{font:600 1.8rem Fraunces,serif;color:var(--tinta)}
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.tabla{overflow-x:auto;border:1px solid var(--linea);border-radius:4px;background:#fffdf9}
table{width:100%;border-collapse:collapse;font-size:.93rem}th,td{padding:12px 14px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:middle}
th{font:600 .72rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}tr:last-child td{border-bottom:0}
td small{display:block;color:var(--gris);font-size:.8rem}td.p{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* armalo como quieras */
.armalo{margin-top:40px;padding:26px;border-radius:6px;background:var(--hierro);color:var(--papel)}
.armalo h2{margin:0 0 6px;color:var(--papel)}.armalo .suave{color:#bdb5a8}
.cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;margin-top:18px}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.campos label{display:flex;flex-direction:column;font-size:.82rem;color:#d8d0c4;gap:5px}
.campos input[type=number]{font:600 1rem Inter,sans-serif;padding:10px 12px;border-radius:6px;border:1px solid #4a4b50;background:#1b1c1e;color:#fff;width:100%}
fieldset{grid-column:1/-1;border:0;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:8px}legend{font-size:.82rem;color:#d8d0c4;margin-bottom:6px;padding:0}
.op{flex-direction:row!important;align-items:center;gap:8px!important;padding:6px 12px 6px 6px;border:1px solid #4a4b50;border-radius:999px;cursor:pointer;color:#fff!important}
.op input{position:absolute;opacity:0}.op i{width:24px;height:24px;border-radius:50%;background-size:cover;border:2px solid #fff}
.op:has(input:checked){border-color:#e0a37e;background:#3a3b3f}.op:has(input:focus-visible){outline:2px solid #e0a37e}
.campos .btn{grid-column:1/-1;background:var(--papel);color:var(--tinta)}.campos .btn:hover{background:#fff}
.vista{margin:0;background:#fff;border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:8px}.vista img{width:100%;aspect-ratio:4/3;object-fit:contain}
.vista figcaption{font-size:.85rem;color:var(--gris)}
@media(max-width:760px){.cfg{grid-template-columns:1fr}}
footer{border-top:1px solid var(--linea);padding:34px 0;font-size:.9rem;color:var(--gris)}footer .env{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.flotante{position:fixed;right:18px;bottom:18px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.25)}@media(min-width:861px){.flotante{display:none}}
@media(prefers-reduced-motion:reduce){.art{animation:none}.art img,.btn{transition:none}}