// PROD — imagen principal 362px fija; miniaturas solo con transition-colors
<div className="relative h-[362px] overflow-hidden rounded-b-[8px] border">
<img className="h-full w-full object-cover" />
…flechas · fullscreen · contador 1/21…
</div>
// miniatura: sin hover; el borde de la seleccionada no coincide con Concorde
<button className="aspect-[106/98] rounded-[6px] border border-[#d8d9e3]
transition-colors
/* seleccionada: */ border-[#ED8936] ring-2 ring-[#F99845]/40">
<img className="h-full w-full object-cover" />
</button>
// Concorde — viewer con altura fija, hover y borde naranja al seleccionar
<div className="pcardv pcardv--live">
<div className="pcardv__viewer">
<img className="pcardv__img" /> {/* height: 362px */}
…prev · next · expand · count…
</div>
<div className="pcardv__strip">
<button className="pcardv__thumb pcardv__thumb--selected"><img/></button>
<button className="pcardv__thumb"><img/></button>
</div>
</div>
/* CSS clave */
.pcardv__img { height: 362px; width: 100%; object-fit: cover; }
.pcardv__thumb { border: 1px solid #d8d9e3; transition: border-color .18s, box-shadow .18s; }
.pcardv__thumb:hover { border-color: #ED8936; box-shadow: 0 0 0 2px rgba(249,152,69,.4); }
/* seleccionada/presionada = borde naranja (live) */
.pcardv__thumb--selected { border-color: #ED8936; box-shadow: 0 0 0 2px rgba(249,152,69,.4); }
