.reference-note{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(12,53,80,.08);
  color:#0f3b56;
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:1rem;
}

.reference-note::before{
  content:"●";
  font-size:.9rem;
}

.palette-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  margin-top:1.2rem;
}

.palette-card{
  border:1px solid rgba(16,50,70,.12);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 28px rgba(11,29,45,.06);
}

.palette-swatch{
  height:92px;
  position:relative;
}

.palette-swatch::after{
  content:"REFERENCIA";
  position:absolute;
  right:10px;
  bottom:10px;
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:800;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.18);
  padding:.24rem .42rem;
  border-radius:999px;
  backdrop-filter:blur(2px);
}

.palette-card.light .palette-swatch::after{
  color:#173244;
  background:rgba(255,255,255,.72);
}

.palette-body{
  padding:14px 15px 16px;
}

.palette-body h3{
  margin:0 0 4px 0;
  font-size:1rem;
  color:#173244;
}

.palette-body p{
  margin:0;
  font-size:.9rem;
  line-height:1.45;
  color:#5E6B75;
}

.palette-disclaimer{
  margin-top:18px;
  padding:16px 18px;
  border:1px dashed rgba(16,50,70,.18);
  border-radius:16px;
  background:rgba(238,245,248,.72);
  color:#173244;
}

.palette-disclaimer strong{
  display:block;
  margin-bottom:6px;
}