/* =========================================================
 *  jjj_Bloques_De_Enlaces — Front-end
 *  3 looks: A (horizontal), B (categorías), C (revista)
 * ========================================================= */

.jjj-bp-block{ margin: 10px 0 22px; }
.jjj-bp-grid{ display:grid; gap:14px; }

@media (max-width: 767px){ .jjj-bp-grid{ grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px){ .jjj-bp-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){
  .jjj-bp-cols-desktop-1{ grid-template-columns: repeat(1, 1fr); }
  .jjj-bp-cols-desktop-2{ grid-template-columns: repeat(2, 1fr); }
  .jjj-bp-cols-desktop-3{ grid-template-columns: repeat(3, 1fr); }
  .jjj-bp-cols-desktop-4{ grid-template-columns: repeat(4, 1fr); }
  .jjj-bp-cols-desktop-5{ grid-template-columns: repeat(5, 1fr); }
}

/* Base común a los 3 looks */
.jjj-bp-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  height:100%;
  display:flex;
  flex-direction:column;
}
.jjj-bp-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  text-decoration:none !important;
}
.jjj-bp-title{
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  margin-bottom:6px;
  color:#1a1a1a;
}
.jjj-bp-desc{
  font-size:13px;
  line-height:1.3;
  opacity:.85;
}
.jjj-bp-badge{
  display:inline-block;
  background:#E0472B;
  color:#fff;
  font-weight:700;
  font-size:11px;
  letter-spacing:.02em;
  padding:3px 9px;
  border-radius:6px;
  margin-bottom:8px;
}
.jjj-bp-img{ display:block; }
.jjj-bp-img-empty{ background:#f2f2f2; }


/* =========================================================
 * LOOK A · Horizontal (imagen izquierda, texto derecha)
 * ========================================================= */
.jjj-bp-card-a .jjj-bp-content{
  position:relative;
  z-index:2;
  display:flex;
  gap:14px;
  padding:14px;
  pointer-events:none;
}
.jjj-bp-card-a .jjj-bp-content *{ pointer-events:none; }

.jjj-bp-card-a .jjj-bp-left{
  flex:0 0 110px;
  width:110px;
}
.jjj-bp-card-a .jjj-bp-img{
  width:110px;
  height:110px;
  object-fit:contain;
}
.jjj-bp-card-a .jjj-bp-img-empty{
  width:110px;
  height:110px;
  border-radius:8px;
}
.jjj-bp-card-a .jjj-bp-right{ flex:1 1 auto; min-width:0; }


/* =========================================================
 * LOOK B · Categorías (imagen arriba, texto centrado debajo)
 * ========================================================= */
.jjj-bp-card-b{ text-align:center; }
.jjj-bp-card-b .jjj-bp-media{
  position:relative;
  z-index:2;
  padding:18px 18px 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.jjj-bp-card-b .jjj-bp-img{
  width:100%;
  max-width:160px;
  height:140px;
  object-fit:contain;
}
.jjj-bp-card-b .jjj-bp-img-empty{
  width:100%;
  max-width:160px;
  height:140px;
  border-radius:8px;
}
.jjj-bp-card-b .jjj-bp-badge{
  position:absolute;
  top:14px;
  right:14px;
  margin-bottom:0;
}
.jjj-bp-card-b .jjj-bp-body{
  position:relative;
  z-index:2;
  padding:14px 16px 18px;
  pointer-events:none;
}
.jjj-bp-body-center{ display:flex; flex-direction:column; align-items:center; }
.jjj-bp-card-b .jjj-bp-title{ font-size:16px; }
.jjj-bp-card-b .jjj-bp-desc{ text-align:center; }


/* =========================================================
 * LOOK C · Revista (imagen grande arriba, texto a la izquierda debajo)
 * ========================================================= */
.jjj-bp-card-c .jjj-bp-media-wide{
  position:relative;
  z-index:2;
  pointer-events:none;
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#f2f2f2;
}
.jjj-bp-card-c .jjj-bp-media-wide .jjj-bp-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.jjj-bp-card-c .jjj-bp-body{
  position:relative;
  z-index:2;
  padding:14px 16px 18px;
  text-align:left;
  pointer-events:none;
}
.jjj-bp-body-left{ display:flex; flex-direction:column; align-items:flex-start; }
.jjj-bp-card-c .jjj-bp-title{ font-size:17px; }