Cards — border-radius de fondo distintos

17 jul 2026

Producción

Concorde

Qué está mal

El border-radius del contenedor de la card no coincide entre superficies: en Producción es 8px y en Concorde 16px.

Al no calzar, las esquinas redondeadas del fondo se ven distintas entre secciones.

Cómo se corrige

Unificar el radius del contenedor a un solo valor en ambas superficies.

Concorde usa 16px; Producción usa rounded-[8px]. Alinear ambos al mismo token de radius.

Código producción

// PROD — contenedor de la card con radius 8px
<div className="mx-auto mb-4 w-full py-0 md:py-4
                rounded-[8px]           /* ← 8px */
                border border-[rgba(32,0,104,0.07)]
                bg-white shadow-[0_2px_10px_rgba(32,0,104,0.06)]">
  {/* Tipo de oferta + Categorías */}
</div>

Código Concorde

ver código Concorde

// Concorde — el mismo contenedor con radius 16px
<section style={{
  width: 766,
  height: 184,
  background: "#ffffff",
  borderRadius: 16,          /* ← 16px (distinto de PROD) */
  boxShadow: "rgba(0,0,0,0.07) 0px 0px 16px 4px",
  padding: "12px 20px",
  display: "flex",
  alignItems: "center",
}}>
  {/* Tipo de oferta */}
  <div>…</div>

  {/* divisor vertical del medio */}
  <div style={{ width: 1, height: 143, background: "#E5E7EB" }} />

  {/* Categorías */}
  <div>…</div>
</section>

// Fix: unificar borderRadius al mismo valor en ambas superficies.