/* ============================================================
   BIONARA — Top 5 más vendidos
   ============================================================ */
.top5-sec{background:var(--cream);}
.t5-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}

.t5-card{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 16px 16px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.t5-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--cc) 40%,transparent);}
.t5-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--cc),var(--cc2));opacity:0;transition:opacity .3s;}
.t5-card:hover::before{opacity:1;}

.t5-rank{
  position:absolute;top:14px;left:14px;z-index:4;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,var(--green-700),var(--green-500));box-shadow:0 6px 14px rgba(16,58,39,.2);
}
.t5-card:first-child .t5-rank{background:linear-gradient(135deg,var(--gold-500),var(--amber));box-shadow:0 6px 16px rgba(239,125,46,.4);}

.t5-fav{position:absolute;top:14px;right:14px;z-index:4;width:34px;height:34px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;color:var(--muted);transition:transform .25s,color .25s;}
.t5-fav:hover{transform:scale(1.12);color:var(--amber);}
.t5-fav.on{color:var(--amber);}
.t5-fav svg{width:17px;height:17px;}

.t5-media{position:relative;height:168px;display:grid;place-items:center;margin:6px 0 12px;}
.t5-media .aura{position:absolute;width:74%;height:74%;border-radius:50%;background:radial-gradient(circle,var(--cc),transparent 68%);opacity:.14;filter:blur(16px);transition:opacity .5s,transform .6s var(--ease);}
.t5-card:hover .t5-media .aura{opacity:.3;transform:scale(1.16);}
.t5-media img{max-height:168px;max-width:88%;width:auto;height:auto;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 16px 18px rgba(16,40,28,.2));transition:transform .5s var(--ease);}
.t5-card:hover .t5-media img{transform:translateY(-6px) scale(1.05);}

.t5-cat{font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cc);}
.t5-card h3{font-size:1.02rem;margin-top:5px;line-height:1.18;min-height:2.36em;}
.t5-rate{display:flex;align-items:center;gap:7px;margin-top:9px;}
.t5-rate .stars{display:inline-flex;gap:1px;color:var(--gold-500);}
.t5-rate .stars svg{width:14px;height:14px;}
.t5-rate b{font-family:var(--font-head);font-size:.84rem;color:var(--green-900);}
.t5-rate span{font-size:.78rem;color:var(--muted);}

.t5-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;}
.t5-foot .quote-pill{font-size:.72rem;padding:7px 11px;}
.t5-foot .price{font-family:var(--font-head);font-weight:800;font-size:1.08rem;color:var(--green-900);}
.t5-add{width:42px;height:42px;flex-shrink:0;border-radius:13px;background:var(--cc);color:#fff;display:grid;place-items:center;transition:transform .25s var(--ease-bounce),background .2s;}
.t5-add:hover{transform:scale(1.08);}
.t5-add:active{transform:scale(.9);}
.t5-add svg{width:20px;height:20px;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .t5-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  /* grilla 2 columnas: sin scroll lateral, poco scroll vertical */
  .t5-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .t5-card{padding:14px 12px 13px;}
  .t5-rank{width:30px;height:30px;font-size:.95rem;border-radius:9px;top:11px;left:11px;}
  .t5-fav{width:30px;height:30px;top:11px;right:11px;}
  .t5-media{height:132px;margin:4px 0 9px;}
  .t5-media img{max-height:132px;max-width:84%;}
  .t5-card h3{font-size:.94rem;min-height:0;}
  .t5-cat{font-size:.58rem;}
  .t5-rate .stars svg{width:12px;height:12px;}
}
@media (max-width:480px){
  .t5-grid{gap:10px;}
  .t5-card h3{font-size:.9rem;}
  .t5-media{height:118px;}
  .t5-media img{max-height:118px;}
  .t5-foot .price{font-size:1rem;}
  .t5-add{width:38px;height:38px;}
}