/* ============================================================
   TIENDA BLUE DIAMONDS · prototipo independiente
   Reutiliza los tokens de styles.css (navy/latón/radio 2px)
   ============================================================ */

/* aviso de que esto es un prototipo, no la web publicada */
.proto-flag{
  position:fixed;top:0;left:0;right:0;z-index:70;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--brass);color:#0A1626;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase
}
header{top:30px}
.sheet{top:102px}
body{padding-top:30px}

.page-wrap{position:relative;z-index:2}

/* ---- hero corto: deja ver el arranque de las tarjetas sin hacer scroll ---- */
.t-hero{
  position:relative;overflow:hidden;padding:132px 0 46px;
  background:radial-gradient(110% 90% at 82% 0%, rgba(18,44,72,.9), rgba(5,15,30,0) 62%),
             linear-gradient(180deg,var(--navy-800),var(--navy-900));
  border-bottom:1px solid var(--line-navy);
}
.t-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:linear-gradient(74deg,transparent calc(58% - .5px),rgba(201,169,106,.13) 58%,transparent calc(58% + .5px));
}
.t-hero .wrap{position:relative}
.t-hero h1{font-size:clamp(28px,3.6vw,44px);margin-top:14px;max-width:20ch;letter-spacing:-.03em}
.t-hero .lead{margin-top:16px;font-size:16.5px;color:rgba(242,245,248,.72);max-width:56ch}
.t-scrollcue{display:flex;align-items:center;gap:10px;margin-top:26px;color:var(--brass-2);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.85}
.t-scrollcue i{display:block;width:1px;height:22px;background:linear-gradient(var(--brass),transparent);
  animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.t-scrollcue i{animation:none}}

/* ---- tabs de filtro ---- */
.prod-tabs{display:flex;gap:10px;flex-wrap:wrap;padding:30px 0 30px;border-bottom:1px solid var(--line-navy)}
.prod-tabs .tab{
  padding:9px 18px;border-radius:99px;border:1px solid var(--line-navy);background:transparent;
  color:rgba(242,245,248,.6);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)
}
.prod-tabs .tab:hover{border-color:rgba(201,169,106,.5);color:var(--brass-2)}
.prod-tabs .tab.on{background:var(--brass);border-color:var(--brass);color:#0A1626}

/* ---- grid de piezas ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-navy);
  border-bottom:1px solid var(--line-navy);margin:0 0 40px}
.prod{background:var(--navy-900);display:flex;flex-direction:column;transition:background .4s var(--ease)}
.prod:hover{background:var(--navy-800)}
.prod[hidden]{display:none}
.prod-ph{
  aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:rgba(201,169,106,.4);border-bottom:1px solid var(--line-navy);
  background:repeating-linear-gradient(135deg,rgba(201,169,106,.05) 0 12px,transparent 12px 24px)
}
.prod-ph svg{width:34px;height:34px}
.prod-ph span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(201,169,106,.5)}
.prod-b{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.prod-tag{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-family:"Archivo",sans-serif;font-weight:600}
.est{font-style:normal;font-size:10px;letter-spacing:.1em;padding:4px 9px;border-radius:99px;border:1px solid}
.est-disponible{color:#8fd6a8;border-color:rgba(143,214,168,.4);background:rgba(143,214,168,.08)}
.est-reservada{color:var(--brass-2);border-color:rgba(201,169,106,.4);background:rgba(201,169,106,.08)}
.est-vendida{color:rgba(242,245,248,.45);border-color:var(--line-navy);background:rgba(255,255,255,.03)}
.prod h3{margin-top:14px;font-size:19px;font-variation-settings:"wdth" 92;line-height:1.25;letter-spacing:-.01em}
.prod-b p{margin-top:10px;font-size:14px;color:rgba(242,245,248,.6);flex:1}
.prod-specs{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-navy)}
.prod-specs span{font-size:12.5px;color:rgba(242,245,248,.55);display:flex;justify-content:space-between;gap:10px}
.prod-specs b{color:rgba(242,245,248,.8);font-weight:600}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}
.prod-price{font-size:19px;font-weight:600;color:var(--white);font-variation-settings:"wdth" 92}
.btn-sm{padding:10px 16px;font-size:12.5px;height:auto}
.prod-note{padding:0 0 90px;font-size:14px;color:rgba(242,245,248,.55);text-align:center}
.prod-loading{grid-column:1/-1;padding:60px 20px;text-align:center;font-size:15px;color:rgba(242,245,248,.55);background:var(--navy-900)}
.prod-gal{position:relative;border-bottom:1px solid var(--line-navy)}
.prod-main{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.prod-thumbs{position:absolute;left:14px;bottom:14px;display:flex;gap:6px}
.prod-th{width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:2px;overflow:hidden;
  background:#fff;cursor:pointer;opacity:.75;transition:opacity .25s var(--ease),border-color .25s var(--ease)}
.prod-th img{width:100%;height:100%;object-fit:cover;display:block}
.prod-th:hover,.prod-th.on{opacity:1;border-color:var(--brass)}
.prod-th:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

@media (max-width:1100px){
  .prod-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .t-hero{padding:104px 0 34px}
}
@media (max-width:640px){
  .prod-grid{grid-template-columns:1fr}
  .prod-tabs{padding:24px 0 24px}
}