/* ============================================================
   ÉGIDA — colores.css
   ============================================================ */

/* ---------- Colores ---------- */
.colores{ background:var(--white); }
.palette{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(17,17,36,.35);
}
.swatch{
  display:flex; flex-direction:column; justify-content:end; gap:.15rem;
  text-align:left; padding:1.6rem 1.4rem; min-height:280px;
  background:var(--swatch);
  transition:flex-grow .0s, transform .3s var(--ease);
  position:relative; overflow:hidden;
}
.swatch::before{
  content:"Copiar"; position:absolute; top:1.2rem; left:50%;
  transform:translate(-50%,-8px); opacity:0;
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .3s, transform .3s var(--ease);
}
.swatch:hover::before{ opacity:.9; transform:translate(-50%,0); }
.swatch:nth-child(odd){ transition:transform .3s var(--ease); }
.swatch:hover{ transform:translateY(-6px); z-index:1; }
.swatch__name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.25; }
.swatch__hex{ font-weight:400; font-size:.95rem; letter-spacing:.04em; }
.swatch__role{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.65; margin-top:.35rem; }
.palette-official{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(17,17,36,.35);
  max-width:760px; margin-inline:auto;
}
.palette-official figcaption{
  padding:.9rem 1.2rem; background:var(--grey);
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
}