Ofertas relacionadas — brackets del título mal encajados y cards de otro tamaño

17 jul 2026

Producción

Concorde

Qué está mal

Los brackets (esquinas) del título «OFERTAS RELACIONADAS» no encajan alrededor del texto: el wrapper del título tiene distinto padding que en Concorde.

Las cards internas tienen tamaños distintos: Producción usa grid fluido (pcard--compact), Concorde usa cards fijas 134×170 (pcard--short).

Cómo se corrige

Igualar el padding del wrapper del título (8px 12px) para que los brackets encajen en las esquinas del texto.

Usar el tamaño de card fijo de Concorde (134×170, imagen 134×112) en un grid de 134px por columna.

Código producción

// PROD — título con padding px-3 py-2 y brackets sueltos + cards en grid fluido
<div className="relative inline-flex flex-col items-start gap-0 px-3 py-2">
  <svg className="absolute left-0 top-0 h-2.5 w-2.5">…bracket tl…</svg>
  <svg className="absolute bottom-0 right-0 h-2.5 w-2.5">…bracket br…</svg>
  <h3 className="text-[14px] font-semibold uppercase">Ofertas relacionadas</h3>
</div>

<div className="grid grid-cols-2 gap-4">
  <article className="pcard pcard--compact">…</article>   {/* tamaño fluido */}
</div>

Código Concorde

ver código Concorde

// Concorde — CardTitle (padding 8px 12px, brackets --tl/--br) + cards fijas
<div className="cardtitle">   {/* padding: 8px 12px → brackets encajan */}
  <svg className="cardtitle__bracket cardtitle__bracket--tl">…</svg>
  <h3 className="cardtitle__title">OFERTAS RELACIONADAS</h3>
  <svg className="cardtitle__bracket cardtitle__bracket--br">…</svg>
</div>

<div style={{ display: "grid", gridTemplateColumns: "134px 134px",
              justifyContent: "space-between", rowGap: 8 }}>
  <article className="pcard pcard--short">…</article>   {/* 134×170 · img 134×112 */}
</div>

/* .pcard--short { width: 134px; height: 170px; }
   .pcard--short .pcard__img { height: 112px; } */