:root { --ink:#292019; --gold:#ac8049; --paper:#fffaf3; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Arial,sans-serif; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }
a, button { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.detail-header { position:relative; min-height:112px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #e9dfd3; padding:18px max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left)); }
.brand img { display:block; width:100px; height:auto; }
.back-link { position:absolute; left:calc(24px + env(safe-area-inset-left,0px)); display:grid; place-items:center; width:48px; height:48px; text-decoration:none; font-size:28px; border:1px solid var(--gold); border-radius:50%; background:#f3e7d7; color:var(--ink); box-shadow:0 3px 10px #29201914; transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
.back-link:hover, .back-link:focus-visible { background:var(--ink); color:var(--paper); box-shadow:0 4px 14px #29201926; }
.back-link:active { background:#5b4431; color:var(--paper); }
@media(prefers-reduced-motion:reduce) { .back-link { transition:none; } }
.product-detail { width:min(1320px,calc(100% - 80px)); margin:56px auto 80px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; }
.gallery { display:grid; grid-template-columns:86px minmax(0,1fr); gap:16px; align-items:start; }
.main-photo { grid-column:2; grid-row:1; position:relative; aspect-ratio:1; background:#eee5dc; overflow:hidden; }
.main-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.photo-counter { position:absolute; right:14px; bottom:14px; background:#241d18c9; color:white; border-radius:30px; padding:8px 12px; font-size:11px; letter-spacing:.12em; }
.thumbnails { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:14px; }
.thumbnail { padding:3px; border:1px solid #d6c6b4; background:transparent; width:100%; aspect-ratio:1; }
.thumbnail:hover { border-color:var(--gold); }
.thumbnail img { display:block; width:100%; height:100%; object-fit:contain; }
.eyebrow { margin:10px 0 18px; text-transform:uppercase; letter-spacing:.23em; color:var(--gold); font-size:10px; }
h1 { margin:0 0 24px; font:400 clamp(40px,4.5vw,64px)/1.04 Georgia,serif; overflow-wrap:anywhere; }
.description { font:18px/1.65 Georgia,serif; color:#665649; margin:0 0 30px; }
.details { border-top:1px solid #ddcdbd; padding-top:24px; margin-bottom:32px; }
.color-section { border:0; padding:0; margin:0 0 28px; min-width:0; }
.color-section legend { font-size:12px; padding:0; margin-bottom:12px; }
.color-options { display:flex; flex-wrap:wrap; gap:12px; }
.color-option { display:flex; align-items:center; gap:10px; min-height:48px; padding:9px 14px; border:1px solid #d6c6b4; background:transparent; color:var(--ink); border-radius:4px; }
.color-option[aria-pressed="true"] { border:2px solid var(--gold); padding:8px 13px; }
.color-swatch { display:block; width:22px; height:22px; border-radius:50%; border:1px solid #9c8879; }
.color-swatch--blush { background:#d7aaa2; }
.color-swatch--negro { background:#171717; }
.color-swatch--camel { background:#c99253; }
.color-swatch--marfil { background:#eee8dc; }
.color-swatch--beige { background:#dcc09a; }
.color-swatch--gris-perla { background:#d5d4d0; }
.color-swatch--rosa { background:#eed0d5; }
.color-swatch--celeste { background:#cadde9; }
.color-swatch--rojo { background:#922b30; }
.color-swatch--terracota { background:#ba6238; }
.color-swatch--gris { background:#c6c4c2; }
/* Tonos específicos de Blush, sin alterar muestras de otros modelos. */
[data-product="blush"] .color-swatch--celeste { background:#a8b6b7; }
[data-product="blush"] .color-swatch--beige { background:#c8b99b; }
[data-product="blush"] .color-swatch--gris { background:#c0bfc0; }
/* Variantes de Arena: muestras propias, conservando el resto del catálogo. */
[data-product="arena"] .color-swatch--burdeos { background:#70202c; }
[data-product="arena"] .color-swatch--camel { background:#bb8c54; }
[data-product="arena"] .color-swatch--rosa-viejo { background:#a97868; }
/* Colores propios del conjunto de tres piezas. */
[data-product="cognac-set"] .color-swatch--cognac { background:#a76a3c; }
[data-product="cognac-set"] .color-swatch--rojo { background:#a51f35; }
[data-product="cognac-set"] .color-swatch--negro { background:#202125; }
[data-product="cognac-bucket"] .color-swatch--cognac { background:#a76a3c; }
[data-product="cognac-bucket"] .color-swatch--negro { background:#171717; }
h2 { font-size:11px; text-transform:uppercase; letter-spacing:.15em; font-weight:500; margin:0 0 20px; }
dl { margin:0; }
dl div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; padding:9px 0; font-size:13px; line-height:1.5; }
dt { color:#887364; }
dd { margin:0; }
.marketplace { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; border:0; padding:19px 24px; background:#171310; color:#e1c294; text-decoration:none; font-size:13px; }
.marketplace:hover { background:#35281e; }
.purchase-note { margin:14px 0 25px; font-size:12px; color:#776558; line-height:1.6; }
.collection-link { text-underline-offset:5px; font-size:12px; }
.empty-state { max-width:650px; padding:60px 24px; margin:auto; }
footer { text-align:center; padding:28px 24px calc(28px + env(safe-area-inset-bottom,0px)); border-top:1px solid #e9dfd3; font-size:11px; color:#887364; }
.technical-sheet { grid-column:1 / -1; min-width:0; display:grid; gap:20px; }
.spec-panel { min-width:0; border:1px solid #e7ded3; border-radius:20px; background:#fffdf9; box-shadow:0 4px 8px #29201906, 0 12px 30px #2920190a; }
.spec-panel__toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; padding:22px 28px; border-radius:20px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
.spec-panel__toggle::-webkit-details-marker { display:none; }
.spec-panel__toggle::marker { content:''; }
.spec-panel__toggle:hover { background:#f8f1e8; }
.spec-panel__toggle:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.spec-panel__toggle h2 { margin:0; font-size:18px; text-transform:none; letter-spacing:0; font-weight:600; }
.spec-panel__icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border:1px solid #ddcdbd; border-radius:50%; background:#f3e7d7; }
.spec-panel__icon::before { content:''; width:8px; height:8px; border-right:2px solid #665649; border-bottom:2px solid #665649; transform:translateY(-2px) rotate(45deg); }
.spec-panel[open] .spec-panel__icon::before { transform:translateY(2px) rotate(225deg); }
.spec-panel__content { padding:0 28px 28px; }
.spec-panel__content .purchase-note { margin-bottom:0; }
.technical-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #ddcdbd; border-left:1px solid #ddcdbd; }
.technical-specs div { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:0; padding:0; border-bottom:1px solid #ddcdbd; border-right:1px solid #ddcdbd; }
.technical-specs dt, .technical-specs dd { padding:14px; overflow-wrap:anywhere; min-width:0; }
.technical-specs dt { background:#f1eae1; }
@media(max-width:680px) {
 .technical-specs { grid-template-columns:minmax(0,1fr); }
 .technical-sheet { gap:16px; }
 .spec-panel { border-radius:16px; }
 .spec-panel__toggle { padding:16px; min-height:64px; border-radius:16px; }
 .spec-panel__content { padding:0 16px 20px; }
 .technical-specs dt, .technical-specs dd { padding:12px 10px; }
}
@media(max-width:900px) {
 .product-detail { width:calc(100% - 40px); max-width:660px; grid-template-columns:minmax(0,1fr); gap:34px; margin:28px auto 50px; }
}
@media(max-width:560px) {
 .detail-header { min-height:88px; padding:12px 20px; }
 .brand img { width:84px; }
 .back-link { left:calc(12px + env(safe-area-inset-left,0px)); }
 .product-detail { width:calc(100% - 32px); }
 .gallery { grid-template-columns:minmax(0,1fr); gap:12px; }
 .main-photo { grid-column:1; grid-row:1; }
 .thumbnails { grid-column:1; grid-row:2; flex-direction:row; justify-content:center; gap:12px; }
 .thumbnail { width:76px; flex:0 0 76px; }
 .eyebrow { margin-top:0; }
 h1 { font-size:42px; }
 .description { font-size:17px; }
}