.representative-hero .hero-copy h1 { letter-spacing: .045em; }
.representative-hero .hero-panel > div:first-of-type span { background: #731413; }
.representative-hero .hero-panel > div:nth-of-type(2) span { background: #9a6d21; }
.candidate-card.representante { border-left-color: #74100f; }
.candidate-card.vice-representante { border-left-color: #c79a43; }
.candidate-card .candidate-meta .role-representante { background: #74100f; color: #fff8e9; }
.candidate-card .candidate-meta .role-vice { background: #9a6d21; color: #fff8e9; }
.candidate-details p strong { min-width: 82px; }
.candidate-actions { align-self: center; }
.delete-candidate { background: transparent; border: 1px solid #8e2420; color: #7b1411; cursor: pointer; font-weight: 700; padding: .65rem .8rem; }
.delete-candidate:disabled { cursor: wait; opacity: .55; }
.photo-field { align-items: center; background: #f6efe3; border: 1px solid #d5c6b0; display: grid; gap: 18px; grid-column: 1/-1; grid-template-columns: 112px minmax(0,1fr); padding: 16px; }
.photo-field label { display: grid; gap: 8px; }
.photo-field label > small:not(.field-error) { color: #75665a; font-size: 10px; line-height: 1.45; }
.photo-preview { align-items: center; aspect-ratio: 1; background: #eadcc7; border: 2px solid #fff; box-shadow: 0 4px 18px rgba(38,7,6,.12); color: #75665a; display: flex; font-size: 9px; justify-content: center; overflow: hidden; text-align: center; text-transform: uppercase; width: 112px; }
.photo-preview img { height: 100%; object-fit: cover; width: 100%; }
.candidate-card { grid-template-columns: 68px minmax(0,1fr); }
.candidate-visual { display: grid; gap: 7px; }
.candidate-photo { aspect-ratio: 1; background: #eadcc7; border: 1px solid #d5c6b0; height: 68px; object-fit: cover; width: 68px; }
.candidate-photo-placeholder { align-items: center; color: #74100f; display: flex; font-family: Georgia,serif; font-size: 19px; font-weight: 700; justify-content: center; }
.candidate-visual .candidate-number { height: 28px; width: 68px; }
@media (max-width: 720px) {
  .representative-hero .hero-copy h1 { font-size: clamp(2.2rem, 13vw, 4rem); }
  .candidate-details p strong { min-width: 72px; }
  .photo-field { grid-template-columns: 84px minmax(0,1fr); }
  .photo-preview { width: 84px; }
}