/* Roles compartidos para ejemplos y comparativas de vehículos. */
.hero-b-card, .budget-vehicle {
  --vehicle-title-size: 22px;
  --vehicle-card-radius: 20px;
  --vehicle-card-padding: 24px;
  min-width: 0;
  border-radius: var(--vehicle-card-radius);
  overflow-wrap: anywhere;
}
.hero-b-card h2, .budget-identity h2 {
  font: 600 var(--vehicle-title-size)/1.3 Saira, sans-serif;
  overflow-wrap: anywhere;
}
.hero-b-specs, .budget-details, .budget-origin {
  font-size: 14px;
  line-height: 1.6;
}
.hero-b-photo, .budget-picture { border-radius: 8px; background: var(--color-surface-photo); }
.hero-b-image-placeholder, .budget-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--color-icon);
  font: 400 13px/1.5 Inter, sans-serif;
  text-align: center;
}
/* Reserva el espacio de la etiqueta comercial sobre la foto del hero. */
.hero-b-image-placeholder { padding: 12px 16px 40px; }
.hero-b-image-placeholder::before, .budget-image-fallback::before {
  content: '';
  display: block;
  flex: 0 0 55px;
  width: 110px;
  height: 55px;
  background: url('assets/vehicle-placeholder.svg') center / contain no-repeat;
}
.hero-b-saving strong, .budget-price-amount, .budget-reference strong, .budget-metric-value {
  font-variant-numeric: tabular-nums;
}
.hero-b-saving strong, .budget-reference strong, .budget-metric-value { white-space: nowrap; }
.hero-b-card { padding: var(--vehicle-card-padding); }
.budget-vehicle { --vehicle-card-padding: 20px; padding: 0 var(--vehicle-card-padding) var(--vehicle-card-padding); }
.budget-version { overflow-wrap: anywhere; }
.budget-price, .budget-equipment { padding: var(--vehicle-card-padding); }
.budget-summary { display: flex; flex-direction: column; }
.budget-summary .budget-consult { margin-top: auto; }

/* Cada fila toma la altura del contenido más largo, sin límites de líneas. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1000px) {
    .budget-grid { row-gap: 0; }
    .budget-vehicle { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
    .budget-label { grid-row: 1; }
    .budget-picture { grid-row: 2; }
    .budget-identity { grid-row: 3; }
    .budget-price { grid-row: 4; }
    .budget-equipment { grid-row: 5; }
    .budget-summary { grid-row: 6; margin-top: 0; }
  }
}
@media (max-width: 800px) {
  .hero-b-card, .budget-vehicle { --vehicle-card-radius: 16px; --vehicle-title-size: 20px; }
  .hero-b-card { --vehicle-card-padding: 20px; }
}
@media (max-width: 360px), (min-width: 1000px) and (max-width: 1199px) {
  .hero-b-card, .budget-vehicle { --vehicle-card-padding: 16px; }
}