OfferCard — ícono Subascoin pequeño y desalineado del precio

17 jul 2026

Producción

Concorde

Qué está mal

El ícono de Subascoin se ve pequeño y no queda alineado verticalmente con el precio ni con el like button.

El SVG usa un viewBox con margen negativo (-6 -12 48 56) para acomodar filtros/sombras, lo que descentra el ícono dentro de su caja.

Cómo se corrige

Ajustar el viewBox al contenido real y dar al SVG un width/height fijos, sin margen negativo.

Envolver ícono + precio en un contenedor flex con align-items:center para que ícono, precio y like queden en el mismo eje vertical.

Código producción

// PROD — SVG con viewBox de margen negativo + filtros → ícono chico y descentrado
<div className="pcard__price-row">
  <div className="pcard__price-group">
    <div className="pcard__price-icon-wrap">
      <svg viewBox="-6 -12 48 56" overflow="visible">  {/* ← descentra */}
        …filtros/sombras que agrandan la caja…
      </svg>
    </div>
    <p className="pcard__price">US$ 5,399</p>
  </div>
  <button className="like-button">♡</button>
</div>

Código Concorde

ver código Concorde ver handoff

// Concorde — SVG con viewBox ajustado + flex alineado al centro
<div className="pcard__price-row">
  <div className="pcard__price-left">   {/* flex; align-items:center */}
    <div className="pcard-pprice" aria-hidden="true">
      <svg width="30" height="32" viewBox="30 199 28 30">  {/* ← ajustado */}
        …
      </svg>
    </div>
    <span className="pcard__price-text">US$ 9,999</span>
  </div>
  <button className="pcard-like" aria-label="Agregar a favoritos">♡</button>
</div>

/* CSS clave */
.pcard__price-left { display: flex; align-items: center; gap: 8px; }
// → ícono, precio y like alineados en el mismo eje vertical