/* CONTENEDOR */
.sup-ac {
  margin-top: 10px;
}

/* ITEM */
.acc-item {
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.2s ease; text-align: left;
}

/* HEADER */
.acc-header {
  display: flex;
    color: cadetblue !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.acc-header:hover {
  background: rgba(0,0,0,0.04);
}

/* EFECTO PULSACIÓN (ripple simple) */
.acc-header:active {
  background: rgba(0,0,0,0.08);
}

/* FLECHA */
.arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc-item.active .arrow {
  transform: rotate(180deg);
}

/* BODY */
.acc-body {
  overflow: hidden;
    color: brown;
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.98) translateY(-6px);
  transform-origin: top;

  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  padding: 0 12px;
  will-change: max-height, opacity, transform;
}

/* ABIERTO */
.acc-body.open {
  opacity: 1;
  transform: scaleY(1) translateY(0);
  padding: 12px;
}
/* ── DETALLE SUPLEMENTO ── */
.sup-detail{display:flex;flex-direction:column;}

.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--br);color:var(--mu);
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 13px;cursor:pointer;transition:.18s;font-family:'DM Mono',monospace;
  align-self:flex-start;
}
.back-btn:hover{border-color:var(--ac);color:var(--ac)}
.back-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none}


.sup-info{display:flex;flex-direction:column; grid-column:2;
  gap:.5rem;padding-top:.2rem}
.sup-name{
  font-family:'Cormorant Garamond',serif;font-size:1.55rem;
  font-weight:600;color:var(--tx);line-height:1.15;
}
.sup-grupo-label{font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.sup-grupo-val{font-size:.78rem;color:var(--ac);margin-top:.15rem;line-height:1.5}

.sup-score-num{
  font-family:'Cormorant Garamond',serif;font-size:2.8rem;
  font-weight:600;line-height:1;
}
.sup-score-bar{
  width:60px;height:7px;border-radius:4px;
  background:linear-gradient(to right,#c0392b,#e67e22,#f1c40f,#2ecc71);
  position:relative;overflow:hidden;
}
.sup-score-bar-mask{
  position:absolute;top:0;right:0;bottom:0;
  background:rgba(0,0,0,.6);
}
.sup-score-label{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}

.sup-grupo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 80px;
  line-height: 2vh;
}
.sup-grupo-item img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.sup-grupo-item span {
  color: cadetblue;
}
.sup-grupo-cat {
  font-size: 15px;
  font-weight: bold;
    margin-top: -18px;
}
.sup-grupo-sub {
  font-size: 12px;
   margin-top: 4px;
}


.sup-tabs{display:flex;gap:0;border-bottom:1px solid var(--br);flex-wrap:wrap}
.sup-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--mu);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 13px;cursor:pointer;transition:.18s;font-family:'DM Mono',monospace;
  white-space:nowrap;
}
.sup-tab:hover{color:var(--tx)}
.sup-tab.active{color:var(--ac);border-bottom-color:var(--ac)}

.sup-tab-content{
  font-size:.72rem;line-height:1.85;color:#b8ae98;padding:.9rem 0;
  min-height:80px;
}
.sup-tab-sep{border:none;border-top:1px solid var(--br);margin:.6rem 0}
.sub-label{
  font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mu);margin-bottom:.3rem;display:block;
}