/* =====================================================================
   VALÉOR · valeor-luxe.css — Sistema de materiales (se carga de último)
   ---------------------------------------------------------------------
   La página se lee como un estuche de joyería real:
     · Terciopelo verde  → la caja (barra, portada, pagos, visítanos)
     · Gamuza negra      → la bandeja donde reposan las joyas (colección,
                           destacadas, ficha de la pieza). Las fotos del
                           cliente son de fondo negro: se funden con ella.
     · Oro               → filos, costuras y botones principales
     · Marfil            → tarjetas de papel (guía, textos de la ficha)
   ===================================================================== */
:root{
  --suede:#0e0d0c;
  --suede-2:#151311;
  --suede-deep:#080707;
  --ivory-ink:#f3ede1;
  --ivory-mute:rgba(243,237,225,.62);
  --ivory-faint:rgba(243,237,225,.38);
  --gold-hair:rgba(230,203,134,.22);
  --gold-rim:rgba(230,203,134,.42);
  --ease-lux:cubic-bezier(.22,.61,.36,1);

  /* Gamuza: fibra corta con pelo en una dirección (más larga en vertical) */
  --suede-nap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.38 .95' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62  0 0 0 0 .55  0 0 0 0 .47  0 0 0 .26 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  /* Fibras finas que dan el tacto aterciopelado al acercarse */
  --suede-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.9 .7' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .82  0 0 0 .12 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Papel de algodón para las tarjetas marfil */
  --paper-tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ---------- Gamuza: superficie base reutilizable ---------- */
.catalog-section,.showroom-section,.dialog-media,.showroom-stage{
  background-color:var(--suede);
  background-image:
    radial-gradient(ellipse 70% 46% at 50% 0%,rgba(255,236,204,.075),transparent 70%),
    linear-gradient(115deg,transparent 30%,rgba(255,238,214,.028) 46%,transparent 62%),
    var(--suede-fiber),
    var(--suede-nap);
  background-size:100% 100%,220% 100%,180px 180px,320px 320px;
  background-blend-mode:normal,normal,soft-light,normal;
}

/* ---------- Botones: oro macizo y filo de oro ---------- */
.shine-btn,.ghost-btn,.filter-shortcut{min-height:50px;border-radius:1px;transition:background-color .35s var(--ease-lux),border-color .35s var(--ease-lux),color .35s var(--ease-lux),box-shadow .35s var(--ease-lux),transform .35s var(--ease-lux)}
.shine-btn.primary{
  background:linear-gradient(180deg,#f3dd9a 0%,#d9b765 46%,#b68b3a 54%,#d8b663 100%);
  border:1px solid #8d6a26;color:#1d1504;text-shadow:0 1px 0 rgba(255,244,210,.55);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.75),inset 0 -1px 0 rgba(90,62,14,.45),0 10px 26px rgba(0,0,0,.32);
}
.shine-btn.primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,250,230,.85),inset 0 -1px 0 rgba(90,62,14,.45),0 16px 34px rgba(0,0,0,.4),0 0 0 4px rgba(230,203,134,.12)}
.shine-btn.primary:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(90,62,14,.45)}
.shine-btn:not(.primary),.ghost-btn{background:transparent;border:1px solid var(--gold-rim);color:var(--ivory-ink)}
.shine-btn:not(.primary):hover,.ghost-btn:hover{background:rgba(230,203,134,.07);border-color:var(--gold-l)}
:is(.shine-btn,.ghost-btn,.filter-shortcut,.category-pill,.gender-switch button,.mini-fav,.whatsapp-wide,.favorite-btn):focus-visible{outline:1px solid var(--gold-l);outline-offset:3px}

/* ---------- Costura dorada entre el terciopelo y la gamuza ---------- */
.catalog-section{color:var(--ivory-ink);padding-top:128px;box-shadow:inset 0 18px 40px rgba(0,0,0,.55)}
.catalog-section:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(230,203,134,.55) 20%,rgba(246,226,170,.9) 50%,rgba(230,203,134,.55) 80%,transparent)}
.catalog-section:before{color:var(--gold-l);background:linear-gradient(90deg,transparent,rgba(230,203,134,.5) 30%,transparent 42%,transparent 58%,rgba(230,203,134,.5) 70%,transparent) center/100% 1px no-repeat}
.catalog-section .eyebrow{color:var(--gold-l)}
.catalog-section .section-head h2{color:var(--ivory-ink);font-weight:500}
.catalog-section .section-head h2 em{color:var(--gold-l)}

/* Buscador hundido en la gamuza */
.catalog-section .search-box{height:50px;background:rgba(0,0,0,.38);border:1px solid var(--gold-hair);border-radius:1px;box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.catalog-section .search-box:focus-within{border-color:var(--gold-rim)}
.catalog-section .search-box span{color:var(--gold-l)}
.catalog-section .search-box input{color:var(--ivory-ink);letter-spacing:.02em}
.catalog-section .search-box input::placeholder{color:var(--ivory-faint)}
.catalog-section .filter-shortcut{color:var(--ivory-ink);border-color:var(--gold-rim);background:transparent}
.catalog-section .filter-shortcut b{color:var(--gold-l)}

/* Barra de paneles + Para ella / Para él */
.catalog-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--gold-hair)}
.catalog-bar .category-strip{border-bottom:0;padding:6px 0 0;flex:1;min-width:0}
.catalog-section .category-pill{color:var(--ivory-faint);padding:14px 0 16px;font-size:11.5px;letter-spacing:.24em;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .3s,border-color .3s}
.catalog-section .category-pill:hover{color:var(--ivory-ink)}
.catalog-section .category-pill.active{color:var(--ivory-ink);border-color:var(--gold-l)}
.gender-switch{display:inline-flex;flex:none;padding:3px;border:1px solid var(--gold-hair);background:rgba(0,0,0,.3);box-shadow:inset 0 1px 4px rgba(0,0,0,.5);margin-bottom:10px}
.gender-switch[hidden]{display:none}
.gender-switch button{border:0;background:transparent;color:var(--ivory-mute);font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:11px 16px;cursor:pointer;transition:background .3s,color .3s}
.gender-switch button:hover{color:var(--ivory-ink)}
.gender-switch button.on{background:linear-gradient(180deg,#ecd391,#c9a557);color:#1d1504;box-shadow:inset 0 1px 0 rgba(255,250,230,.7)}
.catalog-section .catalog-status{color:var(--ivory-faint);margin:20px 0 26px;font-size:11px;letter-spacing:.2em}
.catalog-section .catalog-status button{color:var(--gold-l)}

/* ---------- Las joyas: cada una en su alvéolo de la bandeja ---------- */
.catalog-section .product-grid{gap:clamp(14px,1.8vw,26px)}
.catalog-section .product-card{
  background:var(--suede-deep);
  border:1px solid rgba(230,203,134,.12);border-radius:2px;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,240,215,.04),0 1px 0 rgba(255,240,215,.05);
  transition:border-color .5s var(--ease-lux),box-shadow .5s var(--ease-lux);
}
.catalog-section .product-card:hover{transform:none;border-color:rgba(230,203,134,.38);box-shadow:inset 0 3px 10px rgba(0,0,0,.75),0 0 0 1px rgba(230,203,134,.08),0 26px 50px rgba(0,0,0,.55)}
.catalog-section .product-visual{flex:none;margin:0;aspect-ratio:4/5;background:#050505;border-radius:1px}
.catalog-section .product-card:hover .product-visual{transform:none}
.catalog-section .product-visual .pv-img{
  -webkit-mask-image:radial-gradient(ellipse 92% 88% at 50% 48%,#000 64%,transparent 100%);
          mask-image:radial-gradient(ellipse 92% 88% at 50% 48%,#000 64%,transparent 100%);
  transition:transform 1.1s var(--ease-lux),filter .6s var(--ease-lux);filter:saturate(1.02) contrast(1.02);
}
.catalog-section .product-card:hover .pv-img{transform:scale(1.045);filter:saturate(1.08) contrast(1.05) brightness(1.04)}
/* filo de oro interior + destello que cruza la joya al pasar */
.catalog-section .product-visual:after{inset:10px;border:1px solid rgba(230,203,134,.2);background:none;transition:border-color .5s var(--ease-lux),inset .5s var(--ease-lux)}
.catalog-section .product-card:hover .product-visual:after{border-color:rgba(230,203,134,.55);inset:8px}
.catalog-section .product-visual:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,240,205,.13) 48%,transparent 60%);transform:translateX(-120%);transition:transform 1.2s var(--ease-lux)}
.catalog-section .product-card:hover .product-visual:before{transform:translateX(120%)}

.catalog-section .product-badge{left:18px;top:18px;padding:6px 10px 5px;background:rgba(8,7,7,.78);border:1px solid var(--gold-rim);color:var(--gold-l);font-size:9px;letter-spacing:.24em;border-radius:0;backdrop-filter:blur(6px)}
.catalog-section .product-badge.out{color:#e9c2b4;border-color:rgba(233,194,180,.4)}
.catalog-section .mini-fav{right:16px;top:16px;width:36px;height:36px;background:rgba(8,7,7,.6);border:1px solid var(--gold-rim);color:var(--gold-l);font-size:15px;transition:background .3s,color .3s,transform .3s}
.catalog-section .mini-fav:hover{transform:scale(1.06)}
.catalog-section .mini-fav.active{background:var(--gold-l);color:#1d1504}
.catalog-section .quick-view{bottom:22px;background:transparent;color:var(--ivory-ink);border:0;border-bottom:1px solid var(--gold-l);border-radius:0;padding:4px 2px;font-size:9.5px;letter-spacing:.32em;text-shadow:0 1px 8px #000}

.catalog-section .card-info{flex:1;border-top:1px solid rgba(230,203,134,.12);margin-top:0;padding:20px 16px 22px;gap:6px;background:linear-gradient(180deg,rgba(255,240,215,.025),transparent)}
.catalog-section .card-info h3{color:var(--ivory-ink);font-weight:500;font-size:23px;letter-spacing:.01em}
.catalog-section .card-meta{color:var(--ivory-faint);font-size:10px;letter-spacing:.2em}
.catalog-section .card-price{color:var(--gold-l);font-size:21px;font-weight:500;margin-top:auto;padding-top:6px;letter-spacing:.02em}
.catalog-section .card-price:before{content:'';display:block;width:22px;height:1px;margin:0 auto 10px;background:var(--gold-rim)}
.catalog-section .card-price s{color:var(--ivory-faint)}
.catalog-section .card-price.consult{color:var(--gold-l);font-size:10.5px;letter-spacing:.22em}
.catalog-section .product-card.sold-out .pv-img{filter:grayscale(.55) brightness(.7)}

/* Estados vacíos sobre la gamuza */
.catalog-section .empty-state{border:1px solid var(--gold-hair);background:rgba(0,0,0,.25);color:var(--ivory-ink)}
.catalog-section .empty-state h3{color:var(--ivory-ink);font-family:var(--serif);font-weight:500;font-size:34px}
.catalog-section .empty-state p{color:var(--ivory-mute)}
.catalog-section .empty-state span{color:var(--gold-l)}
.catalog-section .empty-state .shine-btn{color:var(--ivory-ink);border-color:var(--gold-rim)}
.catalog-section .product-card.skeleton{box-shadow:inset 0 3px 10px rgba(0,0,0,.75)}
.catalog-section .product-card.skeleton .product-visual{background:linear-gradient(100deg,#0a0909 30%,#171513 50%,#0a0909 70%);background-size:300% 100%}
.catalog-section .product-card.skeleton .card-info i{background:rgba(243,237,225,.08)}

/* ---------- Destacadas: vitrina de gamuza + tarjeta de papel ---------- */
.showroom-section{border-top:1px solid rgba(230,203,134,.25)}
.showroom-heading h2{color:var(--ivory-ink)}
.showroom-shell{background:var(--suede-deep);border:1px solid var(--gold-rim);box-shadow:0 40px 100px rgba(0,0,0,.6)}
.showroom-stage{box-shadow:inset 0 0 80px rgba(0,0,0,.7)}
.showroom-stage img{-webkit-mask-image:radial-gradient(ellipse 90% 88% at 50% 50%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 90% 88% at 50% 50%,#000 68%,transparent 100%)}
.stage-aura{background:radial-gradient(circle,rgba(255,232,180,.1),transparent 65%)}
.stage-category,.stage-index{background:rgba(8,7,7,.72);border-color:var(--gold-rim);border-radius:0}
.showroom-detail{background-color:#f6f0e3;background-image:var(--paper-tooth),linear-gradient(180deg,#f9f5ea,#f1e9d8);border-left:1px solid var(--gold-rim)}

/* ---------- Ficha de la pieza ---------- */
.product-dialog{border-radius:2px;border-color:var(--gold-rim)}
.product-dialog::backdrop{background:rgba(5,5,4,.84);backdrop-filter:blur(4px)}
.dialog-media{box-shadow:inset 0 0 90px rgba(0,0,0,.65)}
.product-visual.xl{background-color:transparent!important;display:flex;align-items:center;justify-content:center}
.product-visual.xl .xl-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
/* centro más oscuro: la foto de fondo negro se funde con la gamuza */
.dialog-media:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 62% 52% at 50% 50%,rgba(4,4,4,.92),rgba(4,4,4,.5) 55%,transparent 80%)}
.dialog-media .product-visual.xl{z-index:1}
.product-visual.xl:after{inset:18px;border-color:rgba(230,203,134,.28)}
.dialog-content{background-color:#f7f1e4;background-image:var(--paper-tooth)}
.dialog-content h2{font-weight:500}
.dialog-close,.close-btn.dialog-close{background:rgba(8,7,7,.78);border-color:var(--gold-rim)}
.gallery-thumbs button{background:#050505;border:1px solid transparent;transition:border-color .3s}
.gallery-thumbs button.active{border-color:var(--gold-l)}
.zoom-hint{background:rgba(8,7,7,.78);border-color:var(--gold-rim);border-radius:0}
/* Pedir por WhatsApp: terciopelo verde de la casa, no el verde de la app */
.whatsapp-wide.primary-wa{min-height:56px;border-radius:1px;border:1px solid #b9954a;color:#f6efd9;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  background-color:#0b4a2a;background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.22)),var(--felt);background-blend-mode:normal,multiply;
  box-shadow:inset 0 0 0 3px #0b4a2a,inset 0 0 0 4px rgba(230,203,134,.45),0 12px 26px rgba(9,40,22,.28);transition:box-shadow .35s var(--ease-lux),transform .35s var(--ease-lux)}
.whatsapp-wide.primary-wa:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 3px #0b4a2a,inset 0 0 0 4px rgba(240,216,150,.75),0 18px 34px rgba(9,40,22,.36)}
.whatsapp-wide.primary-wa span{color:var(--gold-l)}

/* ---------- Guía: tarjetas de papel con doble filo ---------- */
.guide-section{background-color:#f3ecdc;background-image:var(--paper-tooth),linear-gradient(180deg,#efe7d5,#f7f2e7)}
.guide-card{background-color:#fffcf5;background-image:var(--paper-tooth);border:1px solid rgba(143,111,43,.28);border-top:1px solid rgba(143,111,43,.28);box-shadow:inset 0 0 0 5px #fffcf5,inset 0 0 0 6px rgba(143,111,43,.22),0 14px 30px rgba(60,40,10,.06)}

/* ---------- Paneles laterales en gamuza ---------- */
.side-panel{background-color:var(--suede);background-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25)),var(--suede-fiber),var(--suede-nap);background-size:auto,180px 180px,320px 320px;background-blend-mode:normal,soft-light,normal;border-color:var(--gold-rim)}
.panel-actions{background:linear-gradient(180deg,transparent,var(--suede) 26%)}
.filter-group input[type=search],.filter-group select,.side-panel select{background:rgba(0,0,0,.4);border-color:var(--gold-hair);box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.scrim{background:rgba(5,5,4,.72)}
.saved-item img{background:#050505}
.toast{border-radius:0;letter-spacing:.04em;box-shadow:0 18px 40px rgba(0,0,0,.35)}

/* ---------- Celular ---------- */
@media (max-width:760px){
  .catalog-section{padding-top:84px}
  .catalog-bar{flex-direction:column;align-items:stretch;gap:0}
  .catalog-bar .category-strip{order:2;padding-top:4px}
  .gender-switch{order:1;align-self:center;margin:4px 0 14px}
  .gender-switch button{padding:10px 13px;font-size:9.5px;letter-spacing:.16em}
  .catalog-section .product-grid{gap:10px}
  .catalog-section .product-visual:after{inset:6px}
  .catalog-section .product-card:hover .product-visual:after{inset:6px}
  .catalog-section .card-info{padding:14px 8px 16px;gap:3px}
  .catalog-section .card-info h3{font-size:18px}
  .catalog-section .card-meta{font-size:9.5px;letter-spacing:.08em;text-transform:none}
  .catalog-section .card-price{font-size:17px;padding-top:4px}
  .catalog-section .card-price:before{margin-bottom:7px;width:16px}
  .catalog-section .product-badge{left:10px;top:10px;font-size:8px;padding:4px 7px}
  .catalog-section .mini-fav{right:10px;top:10px;width:30px;height:30px;font-size:13px}
  .whatsapp-wide.primary-wa{font-size:11px;letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){
  .catalog-section .product-visual:before{display:none}
  .catalog-section .pv-img{transition:none}
}

/* Todas las tarjetas a la misma altura y el precio alineado abajo */
.catalog-section .product-grid{align-items:stretch}
.catalog-section .product-card{display:flex;flex-direction:column;align-self:stretch}
.catalog-section .product-card .product-open{display:flex!important;flex-direction:column;flex:1;width:100%}

/* ---------- Paquetes ---------- */
.catalog-section .product-visual.mosaic{display:grid;gap:2px;background:#050505}
.catalog-section .product-visual.mosaic .pv-img{position:static;width:100%;height:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none;min-height:0}
.catalog-section .product-visual.mosaic.m2{grid-template-rows:1fr 1fr}
.catalog-section .product-visual.mosaic.m3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.catalog-section .product-visual.mosaic.m3 .pv-img:first-child{grid-row:1/3}
.catalog-section .product-visual.mosaic.m4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.bundle-box{margin:18px 0 4px;padding:16px 16px 12px;border:1px solid rgba(143,111,43,.3);background:rgba(255,252,245,.6)}
.bundle-title{margin:0 0 10px;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)}
.bundle-box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bundle-box li button{width:100%;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:6px;border:1px solid var(--ink-line);background:#fffdf8;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .3s}
.bundle-box li button:hover{border-color:var(--gold-d)}
.bundle-box img{width:52px;height:52px;object-fit:cover;background:#050505}
.bundle-box b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.1}
.bundle-box small{display:block;color:var(--ink-soft);font-size:12px}
.bundle-box em{font-style:normal;font-family:var(--serif);font-size:17px;color:var(--ink)}
.bundle-save{margin:12px 0 0;font-size:14px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.bundle-save b{color:#1f5a37;font-weight:600}
.dialog-content .favorite-btn{text-transform:uppercase;letter-spacing:.17em;font-size:11.5px;font-weight:500;min-height:50px}