/* =========================================================
 *  Bloques de Enlaces — Front-end (4.0)
 *  5 looks: A (horizontal), B (categorías), C (revista), D (píldoras), E (banner)
 *  Variables (por bloque): --bde-badge, --bde-accent, --bde-radius
 * ========================================================= */

.jjj-bp-block{
  --bde-badge:#E0472B; --bde-accent:#4F7942; --bde-radius:14px;
  --bde-ink:#1f2a1c; --bde-muted:#5b6657; --bde-line:rgba(31,42,28,.09);
  margin:10px 0 26px;
  container-type:inline-size; container-name:bde; /* las columnas dependen del ancho del bloque, no de la pantalla */
}
.jjj-bp-heading{
  margin:0 0 16px !important; font-size:clamp(20px,2.4vw,26px) !important; line-height:1.2 !important;
  font-weight:800 !important; color:var(--bde-ink); letter-spacing:-.01em; text-transform:none !important;
}
.jjj-bp-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@container bde (max-width:599px){ .jjj-bp-m2 .jjj-bp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@container bde (min-width:600px) and (max-width:899px){
  .jjj-bp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .jjj-bp-grid.jjj-bp-cols-desktop-1{ grid-template-columns:1fr; }
}
@container bde (min-width:900px){
  .jjj-bp-grid{ gap:18px; }
  .jjj-bp-cols-desktop-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
  .jjj-bp-cols-desktop-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jjj-bp-cols-desktop-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .jjj-bp-cols-desktop-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .jjj-bp-cols-desktop-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* ---------- Base común ---------- */
.jjj-bp-card{
  position:relative; background:#fff; border:1px solid var(--bde-line); border-radius:var(--bde-radius);
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(31,42,28,.06);
  height:100%; display:flex; flex-direction:column; isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.jjj-bp-overlay{ position:absolute; inset:0; z-index:5; text-decoration:none !important; border-radius:inherit; }
.jjj-bp-overlay:focus-visible{ outline:3px solid var(--bde-accent); outline-offset:3px; }
.jjj-bp-card > *:not(.jjj-bp-overlay){ pointer-events:none; }

.jjj-bp-title{ font-weight:800; font-size:16px; line-height:1.25; margin:0 0 6px; color:var(--bde-ink); letter-spacing:-.005em; }
.jjj-bp-desc{ font-size:13.5px; line-height:1.45; color:var(--bde-muted); }
.jjj-bp-desc p{ margin:0 0 6px; }
.jjj-bp-desc p:last-child{ margin-bottom:0; }

.jjj-bp-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.jjj-bp-badge{
  display:inline-flex; align-items:center; background:var(--bde-badge); color:#fff; font-weight:800; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; line-height:1.2;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.jjj-bp-badge-alt{ background:var(--bde-accent); }

.jjj-bp-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-weight:800; font-size:13.5px;
  color:var(--bde-accent); letter-spacing:.01em;
}
.jjj-bp-arrow{ display:inline-block; transition:transform .25s ease; }

.jjj-bp-img{ display:block; max-width:100%; }
.jjj-bp-img-empty{ background:linear-gradient(135deg,#f1efe8,#e7e3d8); }

/* Efecto al pasar el ratón */
.jjj-bp-hover .jjj-bp-card:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(0,0,0,.05), 0 16px 34px rgba(31,42,28,.13); border-color:rgba(31,42,28,.16); }
.jjj-bp-hover .jjj-bp-card .jjj-bp-img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.jjj-bp-hover .jjj-bp-card:hover .jjj-bp-img{ transform:scale(1.05); }
.jjj-bp-hover .jjj-bp-card:hover .jjj-bp-arrow,
.jjj-bp-hover .jjj-bp-card:hover .jjj-bp-pill-go{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .jjj-bp-card, .jjj-bp-card *{ transition:none !important; transform:none !important; } }

/* =========================================================
 * LOOK A · Horizontal
 * ========================================================= */
.jjj-bp-card-a .jjj-bp-content{ display:flex; gap:16px; padding:14px; align-items:center; flex:1; }
.jjj-bp-card-a .jjj-bp-left{
  flex:0 0 112px; width:112px; height:112px; border-radius:calc(var(--bde-radius) * .7); overflow:hidden;
  background:#f6f4ee; display:flex; align-items:center; justify-content:center;
}
.jjj-bp-card-a .jjj-bp-img{ width:100%; height:100%; object-fit:contain; }
.jjj-bp-card-a .jjj-bp-right{ flex:1 1 auto; min-width:0; }
.jjj-bp-card-a .jjj-bp-cta{ margin-top:8px; }

/* =========================================================
 * LOOK B · Categorías
 * ========================================================= */
.jjj-bp-card-b{ text-align:center; }
.jjj-bp-card-b .jjj-bp-media{
  position:relative; margin:12px 12px 0; border-radius:calc(var(--bde-radius) * .75); overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #fff 0%, #f3f0e8 75%); display:flex; justify-content:center; align-items:center;
  aspect-ratio:1 / .82;
}
.jjj-bp-card-b .jjj-bp-img{ width:82%; height:88%; object-fit:contain; }
.jjj-bp-card-b .jjj-bp-badges{ position:absolute; top:10px; right:10px; margin:0; justify-content:flex-end; }
.jjj-bp-card-b .jjj-bp-body{ padding:14px 16px 18px; }
.jjj-bp-body-center{ display:flex; flex-direction:column; align-items:center; }
.jjj-bp-card-b .jjj-bp-title{ font-size:16.5px; }

/* =========================================================
 * LOOK C · Revista
 * ========================================================= */
.jjj-bp-card-c .jjj-bp-media-wide{ position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#f2efe7; }
.jjj-bp-card-c .jjj-bp-media-wide .jjj-bp-img{ width:100%; height:100%; object-fit:cover; }
.jjj-bp-card-c .jjj-bp-badges{ position:absolute; left:12px; top:12px; margin:0; }
.jjj-bp-card-c .jjj-bp-body{ padding:16px 18px 20px; flex:1; }
.jjj-bp-body-left{ display:flex; flex-direction:column; align-items:flex-start; }
.jjj-bp-card-c .jjj-bp-title{ font-size:18px; }
.jjj-bp-card-c .jjj-bp-cta{ margin-top:auto; padding-top:12px; }

/* =========================================================
 * LOOK D · Píldoras
 * ========================================================= */
.jjj-look-d .jjj-bp-grid{ gap:10px; }
.jjj-bp-card-d{ border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 3px 10px rgba(31,42,28,.05); }
.jjj-bp-card-d .jjj-bp-pill{ display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; min-height:64px; }
.jjj-bp-pill-img{ flex:0 0 48px; width:48px; height:48px; border-radius:50%; overflow:hidden; background:#f3f0e8; display:block; }
.jjj-bp-pill-img .jjj-bp-img{ width:100%; height:100%; object-fit:cover; }
.jjj-bp-pill-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.jjj-bp-card-d .jjj-bp-title{ font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jjj-bp-card-d .jjj-bp-badges{ margin:0; }
.jjj-bp-card-d .jjj-bp-badge{ font-size:9.5px; padding:2px 7px; box-shadow:none; }
.jjj-bp-pill-go{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--bde-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; transition:transform .25s ease;
}
.jjj-bp-m2 .jjj-bp-card-d .jjj-bp-pill{ gap:8px; padding-right:8px; }
@container bde (max-width:599px){ .jjj-bp-m2 .jjj-bp-card-d .jjj-bp-pill-go{ display:none; } .jjj-bp-m2 .jjj-bp-card-d .jjj-bp-title{ white-space:normal; font-size:13.5px; } }

/* =========================================================
 * LOOK E · Banner
 * ========================================================= */
.jjj-bp-card-e{ min-height:240px; border:0; background:#1f2a1c; color:#fff; justify-content:flex-end; }
.jjj-bp-card-e .jjj-bp-media{ position:absolute; inset:0; z-index:0; }
.jjj-bp-card-e .jjj-bp-media .jjj-bp-img{ width:100%; height:100%; object-fit:cover; }
.jjj-bp-card-e::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.78) 100%);
}
.jjj-bp-card-e .jjj-bp-badges{ position:absolute; top:14px; left:14px; z-index:2; margin:0; }
.jjj-bp-card-e .jjj-bp-body{ position:relative; z-index:2; padding:20px; }
.jjj-bp-card-e .jjj-bp-title{ color:#fff; font-size:21px; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.jjj-bp-card-e .jjj-bp-desc{ color:rgba(255,255,255,.88); }
.jjj-bp-card-e .jjj-bp-cta{
  color:#fff; background:var(--bde-accent); padding:8px 16px; border-radius:999px; font-size:13px;
}
@container bde (min-width:900px){ .jjj-bp-card-e{ min-height:300px; } .jjj-bp-cols-desktop-1 .jjj-bp-card-e, .jjj-bp-cols-desktop-2 .jjj-bp-card-e{ min-height:340px; } }
 @container bde (max-width:599px){ .jjj-bp-m2 .jjj-bp-card-e{ min-height:200px; } }
@container bde (max-width:599px){ .jjj-bp-m2 .jjj-bp-card-e .jjj-bp-body{ padding:14px; } .jjj-bp-m2 .jjj-bp-card-e .jjj-bp-title{ font-size:16px; } .jjj-bp-m2 .jjj-bp-card-e .jjj-bp-desc{ display:none; } .jjj-bp-m2 .jjj-bp-card-e .jjj-bp-cta{ white-space:nowrap; font-size:12px; padding:6px 12px; } }

/* Móvil a 2 columnas: tarjetas más compactas */
@container bde (max-width:599px){
  .jjj-bp-m2 .jjj-bp-card-a .jjj-bp-content{ flex-direction:column; align-items:flex-start; gap:10px; padding:10px; }
  .jjj-bp-m2 .jjj-bp-card-a .jjj-bp-left{ width:100%; flex-basis:auto; height:auto; aspect-ratio:1; }
  .jjj-bp-m2 .jjj-bp-title{ font-size:14px; }
  .jjj-bp-m2 .jjj-bp-desc{ font-size:12.5px; }
  .jjj-bp-m2 .jjj-bp-card-b .jjj-bp-body, .jjj-bp-m2 .jjj-bp-card-c .jjj-bp-body{ padding:10px 10px 14px; }
}